Frage Laden Sie mehrere Komponenten in denselben Router-Ausgang mit angular2


Ich habe folgende Vorlage für die Root-Komponente meiner angular2-App:

<main class="main">
  <div class="main__container">
    <div class="main__left-area">
      <router-outlet name="left-zone"></router-outlet>
    </div>
    <div class="main__right-area">
      <router-outlet name="right-zone"></router-outlet>
    </div>
  </div>
</main>

Und die folgenden Routen:

import { HomeSummaryComponent } from "../components/home-summary/home-summary.component"
import { DataSummaryComponent } from "../components/data-summary/data-summary.component"
import { AskSummaryComponent } from "../components/ask-summary/ask-summary.component"

import { Routes } from "@angular/router"

export const AppRoutes: Routes = [
  {
    path: "",
    component: HomeSummaryComponent,
    outlet: "left-zone"
  },
  {
    path: "",
    component: DataSummaryComponent,
    outlet: "right-zone"
  }
];

Es funktioniert eigentlich ziemlich gut, aber ich würde gerne mehr als eine einzelne Komponente in der "richtigen Zone" laden können (und in der linken auch tatsächlich). Die Idee wäre, so etwas zu haben:

{
  path: "",
  components: [ DataSummaryComponent, AskSummaryComponent ],
  outlet: "right-zone"
}

Die Controller würden nur nacheinander angehängt werden. Wird es derzeit unterstützt? Wenn nein, ist es möglich das bestehende RouterOutlet zu erweitern?

Vielen Dank


5
2018-02-28 18:57


Ursprung


Antworten:


Nur eine Komponente kann mit einer Route zugewiesen werden. Sie können eine übergeordnete Komponente hinzufügen DataSummaryComponent & AskSummaryComponent und konfiguriere es in der Route.

Aktualisieren:

Wie im Kommentar erwähnt, können Sie eine generische Komponente erstellen, die Komponenten dynamisch lädt, indem Sie die Konfiguration der Dateneigenschaften in der Route verwenden.

Routenkonfiguration

const appRoutes: Routes = [
  { path: '',   redirectTo: '/route1', pathMatch: 'full' },
  { path: 'route1',  component: MasterComponent, data: {puppets : [PuppetComponent1]} },
  { path: 'route2',  component: MasterComponent,  data: {puppets : [PuppetComponent2, PuppetComponent3]}},
  { path: 'route3',  component: MasterComponent,  data: {puppets : [PuppetComponent1, PuppetComponent2, PuppetComponent4]}}
];

Hauptkomponente 

@Component({
  template: `<h1>I am the Master of components</h1>
  <hr />
  <div #puppetContainer></div>
  `
})
class MasterComponent { 
   @ViewChild('puppetContainer', { read: ViewContainerRef }) puppetContainer: ViewContainerRef;

    constructor(
        private router: Router,
        private route: ActivatedRoute,
        private _componentFactoryResolver: ComponentFactoryResolver,
        private viewContainer: ViewContainerRef) {

    }

    ngOnInit(){
       this.route.data
           .subscribe(data => {
              if(!!data && !!data.puppets && data.puppets.length > 0){
                data.puppets.map(puppet => {
                  let componentFactory = this._componentFactoryResolver.resolveComponentFactory(puppet);
                  this.puppetContainer.createComponent(componentFactory);
                });
              }
           });
    }

}

Überprüfen Sie dies Plunker !!

Hoffe das hilft!!


7
2018-02-28 19:02