EXCEPTION：在实例化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：在实例化RouterOutlet期间出错！。

     

原始例外：无法重复使用不包含组件的插座。

这个错误是什么意思？

或者还有其他方法可以添加目标网页吗？感谢

Answer 1

也许这个傻瓜会帮助你，你说的是同样的错误

Plunker

using System.Collections;
using System.IO.Ports;

public class checker : MonoBehaviour {

    public static SerialPort sp = new SerialPort("COM8", 9600, Parity.None, 8, StopBits.One);
    public string message, message1;
    public string message2;



    void Start() {

        OpenConnection();   


    }

    void Update() { 

        message2 = sp.ReadLine(); 

    } 

    void OnGUI()    {

        GUI.Label(new Rect(10, 180, 100, 220), "Sensor1: " + message2);

    }


    public void OpenConnection() {
        if (sp != null) 
        {
            if (sp.IsOpen) 
            {
                sp.Close();
                message = "Closing port, because it was already open!";
            }
            else 
            {
                sp.Open(); 
                sp.ReadTimeout = 1000;  
                message = "Port Opened!";
            }
        }
        else 
        {
            if (sp.IsOpen)
            {
                print("Port is already open");
            }
            else 
            {
                print("Port == null");
            }
        }
    }




    void OnApplicationQuit() {
        sp.Close();
    }



}

但如果您添加@Component({ selector: 'compLogin' }) @View({ template: `<div>CompLogin</div><button (click)="onClick()">Click</button>, directives: [RouterOutlet] }) 这个 - ＆gt; selector: 'compLogin'

<router-outlet></router-outlet>

效果很好。

Plunker

对不起我的英语，我希望你能理解我。我希望能有所帮助

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

Answer 2

我不确定，但我认为我的问题可能是因为当我退出时，<router-outlet></router-outlet>将会消失。因此，当我使用路由器转到登陆组件时，它会显示错误。

我改为这种结构，现在它正在运作。

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

使用路由器转到登陆组件。登陆组件有自己的<nav></nav>。登陆组件可以拥有自己的子路由器。