Angular 2 - 在父母路由器插座中的兒童組件

我目前正在嘗試實現具有多個導航級別的角度2應用程序。問題是，當我的子組件在我的路由中沒有在父組件中顯式聲明時找不到路由器插座。Angular 2 - 在父母路由器插座中的兒童組件

這是錯誤消息我得到：

Unhandled Promise rejection: Cannot find primary outlet to load 'EditUserComponent'

我想是這樣的編輯或詳細視圖，顯示的，而不是當我點擊一個按鈕或鏈接列表視圖。視圖嵌入在具有導航結構併爲內容提供路由器插座的模板佈局中。我也想用我所有的觀點來定位這個路由器插座。我已經嘗試使用指定的插座，但沒有成功。我使用麪包屑組件來顯示當前的路線，所以我不能讓編輯/細節視圖成爲我的列表組件的兄弟。

爲了使它更清楚，我犯了一個plunker演示：

https://embed.plnkr.co/XXxADnS7q8FCfF4W84tS/

我該如何解決出口問題，並從子組件的目標佈局的路由器出口？

來源

2017-02-14 kaischo

很不錯的，你加了plunkr，試圖幫助了:) –

一個解決方案可能是將UsersComponent模板中的所有內容都簡單地包裹起來，除了div中的router outlet之外。如果組件有孩子（UsersEditComponent在這種情況下），則相應地隱藏/顯示div。

這樣做可以讓您的路由器在UsersComponent和UsersEditComponent之間保持正確的父級/子級別，但仍然只在激活路由時顯示UsersEditComponent內容。

這是正是這麼做的UsersComponent實現：

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; 

@Component({ 
    template: 
    `<div *ngIf="!hasChildren"> 
    User 1 <button md-icon-button (click)="editUser(1)">edit</button><br/> 
    User 2 <button md-icon-button (click)="editUser(2)">edit</button> 
    </div> 
    <router-outlet></router-outlet> 
    ` 
}) 

export class UsersComponent implements OnInit { 
    private hasChildren: bool; 
    constructor(private router: Router, private route:ActivatedRoute) { } 

    editUser(id) { 
    this.router.navigate(['users/edit', id]); 
    } 

    ngOnInit() { 
    this.hasChildren = false; 
    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => { 
     this.hasChildren = this.route.children.length > 0; 
    } 
    } 
}

來源

2017-02-14 11:03:59

這正是我現在面臨問題時有很大幫助。當我在那裏添加路由器插座時，它將工作，但它也顯示我的編輯表單上方的列表。我想要我的編輯表單來替換列表。 – kaischo

@ kischo - 對不起，誤解了你。更新了我的答案！ –

再次感謝您的幫助，但是這產生了另一個問題，我沒有將其包含在plunker示例中，但在我的問題文章中解釋過：我的麪包屑也依賴於路線，因此不再有效。它會顯示這樣的內容：首頁 - >用戶，當我點擊編輯，它會顯示：首頁 - >編輯，但它應該是：首頁 - >用戶 - >編輯 – kaischo

Angular 2 - 在父母路由器插座中的兒童組件

回答

相關問題