Saya memiliki komponen berikut di aplikasi TypeScript sudut 2 saya:

  • Komponen Aplikasi
  • Komponen Proyek
    • ProjectListComponent
    • ProjectNewComponent

Saya memiliki tata letak yang sederhana, yang seharusnya sama pada semua halaman, jadi saya menempatkan kode html berikut untuk komponen utama:

<h1>Welcome</h1><a routerLink="/">Home</a>
<hr />
<router-outlet></router-outlet>

Sejauh yang saya mengerti, router menyuntikkan kontennya di <router-outlet>. Sekarang saya ingin membuat komponen proyek bersarang. Untuk kesederhanaan, komponen proyek harus terdiri dari tiga bagian. Satu komponen induk, yang hanya menampung judul dan wadah dan dua komponen anak yang bersarang di komponen induk.

app.routing.ts saya terlihat sebagai berikut:

const appRoutes : Routes = [
    {
        path: 'project',
        component: ProjectComponent,
        children: [
            { path: 'id/:id', component: ProjectEditComponent },
            { path: 'new', component: ProjectNewComponent }
        ]
    }
];

Pertanyaan saya adalah: Bagaimana seharusnya komponen Project dan komponen ProjectList terlihat?

Sejauh ini saya memiliki project.html:

<h3>Projects</h3>
<hr />
<project-list></project-list>
<project-new></project-new>

Tujuan saya adalah seperti, setiap kali saya memanggil ProjectListComponent atau ProjectNewComponent:

<h3>Projects</h3>
<hr />
<div>
    <project-current-component></project-current-component>
</div>

Bagaimana saya bisa mencapai itu? Keuntungannya adalah saya tidak perlu menulis ulang kode html apa pun.

0
Freddy 25 Agustus 2016, 21:35

1 menjawab

Jawaban Terbaik

Jika saya memahami dengan benar apa yang ingin Anda capai, komponen Proyek Anda juga harus menyertakan outlet router (dalam angular2 RC5 yang saya kerjakan akhir-akhir ini, outlet router bersarang diperbolehkan).

AppComponent akan menjadi seperti:

<h1>This is the app component title</h1>
<router-outlet></router-outlet>

ProjectComponent akan menjadi :

<h3>Projects</h3>
<router-outlet></router-outlet>

Dan komponen anak dari ProjectsComponent adalah :

<h5>Child components area</h5> 
<div>
<!-- place whatever code you have inside here -->   
     <project-current-component></project-current-component>
</dir>
1
billias 25 Agustus 2016, 23:03
Itulah yang ingin saya lakukan. Saya juga menemukan contoh ini secara online: plnkr.co/edit/QlMe6pMINxJGTdA3xm0B?p=preview
 – 
Freddy
25 Agustus 2016, 23:13
Namun perhatikan bahwa contoh ini menggunakan versi yang lebih lama. Saya menyarankan Anda untuk beralih ke rc5 karena, menurut apa yang dikatakan tim sudut, sangat dekat dengan rilis resmi 2.0.0.
 – 
billias
26 Agustus 2016, 00:06