异常：RouterOutlet 实例化期间出错

Question

我尝试在 Angular 2.

中添加登陆页面

// app.ts

<div *ngIf="isSignedIn">
    <nav>
        <a [routerLink]="['Home']">Dashboard</a>
        <a [routerLink]="['About']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
</div>

<div *ngIf="!isSignedIn">
    <landing-component></landing-component>
</div>

奇怪的是，当我第一次登录时它运行良好。

但是当我退出并重新登录时，它会显示：

EXCEPTION: Error during instantiation of RouterOutlet!.

ORIGINAL EXCEPTION: Cannot reuse an outlet that does not contain a component.

这个错误是什么意思？

或者还有其他方法可以添加着陆页吗？谢谢

Answer 1

也许这个笨蛋对你有帮助，和你说的有同样的错误

`Plunker`

@Component({
  selector: 'compLogin'
})
@View({
  template: `<div>CompLogin</div><button (click)="onClick()">Click</button>,
  directives: [RouterOutlet] 
})

但是如果你在 selector: 'compLogin' 中添加这个 -><router-outlet></router-outlet>

@Component({
  selector: 'compLogin'
})
@View({
  template: `<div>CompLogin</div><button (click)="onClick()">Click</button>
             <router-outlet></router-outlet>`,
  directives: [RouterOutlet] 
})

效果很好。

`Plunker`

对不起我的英语，我希望你能理解me.I希望它能帮到你

https://www.dartdocs.org/documentation/angular2/2.0.0-beta.7/angular2.router/RouterOutlet/reuse.html

Answer 2

我不确定，但我认为我问题中的问题可能是因为当我退出时，<router-outlet></router-outlet> 将消失。所以当我用router去登陆组件时，就显示错误

我改成了这个结构，现在可以用了。

<div>
   <nav *ngIf="isSignedIn">
      <a [routerLink]="['Home']">Dashboard</a>
      <a [routerLink]="['About']">Heroes</a>
  </nav>
  <router-outlet></router-outlet>
</div>

使用Router去登陆组件。并且登陆组件有自己的<nav></nav>。并且登陆组件可以有自己的子路由器。

异常：RouterOutlet 实例化期间出错

EXCEPTION: Error during instantiation of RouterOutlet

angular

angular2-routing

Plunker

Plunker

`Plunker`

`Plunker`