Angular2: Vorlage einer Komponente rendern/neu laden

Ich habe es endlich geschafft!

Mein Problem war also:

Wenn die neuen HTML-Elemente generiert werden (mit *ngIf) , werden sie nicht angezeigt, weil sie nicht erhalten ) verarbeitet wie die anderen Menüelemente.

Also habe ich gefragt, wie ich die Vorlage mit allen 'neuen' Elementen neu laden oder rendern soll ... Aber ich habe nicht gefunden, wo ich eine Komponente oder die Vorlage einer Komponente neu laden soll. As stattdessen Ich habe die Logik, die das Menü verarbeitet, auf meine aktualisierte Vorlage angewendet.

(Wenn du die Kurzgeschichtenversion haben willst, gehe nach unten und lies die Zusammenfassung)

Also habe ich mich mit der tiefsten Logik meiner Vorlage befasst und eine Anweisung zum Rendern des Menüs erstellt:

MenuDirective (Direktive)

@Directive({
    selector: '[menuDirective]'
})
export class MenuDirective implements OnInit, AfterContentInit {

  constructor(private menu: ElementRef,
            private router: Router,
            public layoutService: LayoutService) {
    this.$menu = $(this.menu.nativeElement);
  }

  // A lot of boring rendering of layout

  ngAfterContentInit() {
        this.renderSubMenus(this.$menu);
    }

  renderSubMenus(menuElement) {
            menuElement.find('li:has(> ul)').each((i, li) => {
                let $menuItem = $(li);
                let $a = $menuItem.find('>a');
                let sign = $('<b class="collapse-sign"><em class="fa fa-plus-square-o"/></b>');
                $a.on('click', (e) => {
                    this.toggle($menuItem);
                    e.stopPropagation();
                    return false;
                }).append(sign);
            });
    }
}

Hier erstelle ich also die menu-Direktive, die das Layout des Menüs gemäß den vorhandenen HTML-Elementen darstellt. Und, wie Sie sehen können, Ich habe das Verhalten, das die Menüelemente verarbeitet, isoliert ​​Hinzufügen des Symbols +, Erstellen der Untermenüfunktion usw. ...: renderSubMenus() .

Wie verhält sich renderSubMenus():

Es durchläuft die DOM-Elemente des als Parameter übergebenen nativeElement und wendet die Logik an, um das Menü korrekt anzuzeigen.

menu.html

<ul menuDirective>    
    <li ibos-navigation-element></li>
    <li>
        <a href="#"><i class="fa fa-lg fa-fw fa-shopping-cart"></i> <span
                            class="menu-item-parent">{{'Orders' | i18n}}</span></a>
        <ul>
            <li routerLinkActive="active">
                <a routerLink="/orders/ordersMain">{{'Orders' | i18n}}</a>
            </li>
        </ul>
    </li>        
</ul>

Und so würde ich das Menü zusammenstellen.

Sehen wir uns nun die Komponente IBOsNavigationElement an, die im Menü mit dem Attribut [ibos-navigation-element] Enthalten ist.

IBOsNavigationElement (Komponente)

@Component({
    selector: '[ibos-navigation-element]',
    template: `
        <a href="#"><i class="fa fa-lg fa-fw fa-group"></i> <span
                class="menu-item-parent">{{'IBOs' | i18n}}</span>
        </a>
        <ul class="renderMe">
            <li routerLinkActive="active">
                <a routerLink="/ibos/IBOsMain">{{'IBOs Main' | i18n}} {{id}}</a>
            </li>
            <li *ngIf="navigationList?.length > 0">
                <a href="#">{{'IBO Details' | i18n}}</a>
                <ul>
                    <li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList">
                        <a href="#/ibos/IboDetails/{{navigatedIBO['id']}}">{{navigatedIBO['name']}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    `
})
export class IBOsNavigationElement implements OnInit, DoCheck {
    private $menuElement: any;
    private navigationList = <any>[];
    private menuRendered: boolean = false;

    constructor(private navigationService: NavigationElementsService, private menuDirective: MenuDirective, private menuElement: ElementRef) {
        this.$menuElement = $(this.menuElement.nativeElement);

        this.navigationService.updateIBOsNavigation$.subscribe((navigationData) => {
                this.navigationList.Push(navigationData);
                log.d('I received this Navigation Data:', JSON.stringify(this.navigationList));
            }
        );
    }

    ngOnInit() {
    }

    ngDoCheck() {
        if (this.navigationList.length > 0 && !this.menuRendered) {
            log.er('calling renderSubMenus()');
            this.menuDirective.renderSubMenus(this.$menuElement.find('ul.renderMe'));
            this.menuRendered = true;
        }
    }
}

Ok, was habe ich hier anders gemacht? Verschiedene Dinge...

1. Ich importiere die Direktive MenuDirective, damit ich ihre Methode renderSubMenus() aufrufen kann.
2. Ich benutze ElementRef und find(), um den Codeblock auszuwählen, den ich an this.menuDirective.renderSubMenus() senden möchte. Ich finde es durch seine class, siehe: this.$menuElement.find('ul.renderMe').
3. Ich implementiere Angulars Haken DoCheck , um die gewünschten Änderungen zu erkennen und Logik auf dieses Änderungsereignis anzuwenden. Siehe ngDoCheck() Methode, mit der ich überprüfe, ob die Liste navigationList ausgefüllt ist und ob ich diesen Codeblock bereits gerendert habe (Ich hatte Probleme, weil zu oft gerendert wurde und ich hatte gerne 6 + Tasten: Katastrophe) .

Zusammenfassung:

Um die Vorlage neu zu laden :

1. Ich habe eine Direktive mit einer Methode erstellt die die Logik anwendet, die normalerweise bei init auftritt.
2. Ich instanziiere diese Direktive in der Komponente, die ich neu laden möchte.
3. Mit ElementRef bekomme ich den Teil der Vorlage, den ich 'neu laden' möchte .
4. Ich wähle, wann ich die 'reload' Methode anwenden möchte, in meinem Fall habe ich es mit ngDoCheck() gemacht. Sie können diese Methode jederzeit aufrufen.
5. Ich nenne die 'reload ' Methode der Direktive, die als Parameter den Teil des Codes in meiner Vorlage übergibt, den ich neu laden möchte (ich hätte die gesamte Vorlage übergeben können) Wenn ich wollte).
6. Die Methode wird auf den Teil der Vorlage angewendet, den ich mit derselben Logik gesendet habe, die angewendet worden wäre, wenn ich die Komponente mit den verborgenen Elementen durch *ngIf instanziiert hätte.

Also technisch gesehen Ich habe die Komponente nicht neu geladen. Ich habe auf die Vorlage der Komponente dieselbe Logik angewendet, die angewendet worden wäre, wenn ich sie neu geladen hätte.