Wie funktioniert Angular2 in <body>?

Ich habe diese Plunker erstellt, um meine aktuelle Situation zu zeigen. In diesem Beispiel ist nichts falsch, aber ich möchte <h1> in index.html zeigt auch in der Anwendung.Wie funktioniert Angular2 in <body>?

Derzeit:

Hello Angular! v4.1.3 
Hello World!!!

Meine Absicht Ergebnis sollte

sein

loading my name is Angular! v4.1.3 
Hello Angular! v4.1.3 
Hello World!!!

Ich weiß, dass ich entfernen und diese <h1> auf jede Komponente setzen, aber es ist nicht das, was ich will, und ich brauche, um meine Anwendung Laufen in body. Hat jemand eine Idee?

Quelle

2017-05-23 Kelyane

Habe noch nie jemanden gesehen, der das versucht. Wahrscheinlich, weil es keine gute Praxis oder möglich ist. Dies ist, wie Komponentendesign sein sollte: https://plnkr.co/edit/g7v8Jae0LwrmFpKoU9J5 – lbrahim

Ich stimme zu, dass es wahrscheinlich nicht gute Praxis ist. Aber es sieht so aus, als könnte es getan werden, wenn Sie es unbedingt brauchen. Schau dir meine Antwort an. –

Sie können <ng-content> verwenden, aber nicht in der "root" -Komponente (siehe https://github.com/angular/angular/issues/4946). Wenn zum Beispiel in index.html Sie tun

<body> 
    <app>Loading...</app> 
</body>

app.ts

@Component({ 
    selector: 'app', 
    template: ` 
     <h2>Hello {{user.name}}</h2> 
     <app-secondary><h3>Some content</h3></app-secondary> 
    ` 
})

app-secondary.ts

@Component({ 
    selector: 'app-secondary', 
    template: ` 
     <div> 
      <h2>Hello World!!! </h2> 
      <ng-content></ng-content> 
     </div> 
    `, 
})

Rendered Seite wird sein:

<body> 
    <app> 
     <h2>Hello Angular! v4.1.3</h2> 
     <app-secondary> 
      <h2>Hello World!!! </h2> 
      <h3>Some content</h3> 
     </app-secondary> 
    </app> 
</body>

Quelle

2017-05-23 13:37:41

Die <body> ta g in der index.html ist, wo Angular Bootstrap erste Komponente. Da es sich um ein SPA handelt, wird im Prinzip die Ansicht der gesamten Anwendung innerhalb dieses Tags gerendert.

Sie müssen die gewünschten Änderungen in der Vorlage der Booster-Komponente vornehmen, die sich in der Datei src/app.ts befindet.

Siehe Plunker hier

Quelle

2017-05-23 13:37:42 Nehal

Hallo @Nehal thx. Ich weiß das, aber genau das werde ich nicht, denn in meinem realen Fall brauche ich es wirklich in '' tag und eckig, um es dort zu interpretieren. – Kelyane

In diesem answer ich zeigte, wie die ViewContainerRef als Rendering-Ziel-App-Komponente zu verwenden. Wenn Sie createComponent darauf aufrufen, wird die neue Komponente neben der App-Komponente (direkt im Body-Tag) erstellt.

export class AppComponent implements OnInit { 
    constructor(
    public viewContainerRef: ViewContainerRef, 
    private componentFactoryResolver: ComponentFactoryResolver 
) { } 

    ngOnInit() { 
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(AppSecondaryComp); 
    const componentRef = this.viewContainerRef.createComponent(componentFactory); 
    } 
}

So stellen Sie sicher AppSecondaryComp im entryComponents Array Ihres Moduls zu registrieren.

Funktioniert das für Sie? app-secondary würde direkt im Body-Tag gerendert werden.

Quelle

2017-05-23 14:05:00

Wie funktioniert Angular2 in <body>?

Antwort

Verwandte Themen