Angular：动态更改 <ng-outlet> 内容

Question

我有一个带有 ng-outlet 的组件。现在我尝试动态设置插座内容。我的第一次尝试是只设置 DOM-Element 的 innerText 属性，但随后组件模板的所有其他内容都丢失了。也许我使用了完全错误的方式，我对 Angular 很陌生。

这是我的组件：

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'ks4-error-output',
  templateUrl: './error-output.component.html',
  styleUrls: ['./error-output.component.styl']
})
export class ErrorOutputComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这里是模板：

<div [hidden]="content.innerText==''">
  <span>Error:</span>
  <span #content><ng-content></ng-content></span>
</div>

我尝试这样设置内容（在这种情况下清除 ng-outlet 内容）：

<form (ngSubmit)="error.innerText=''; ...">...</form>
...
<ks4-error-output #error id="errorOutput"></ks4-error-output>

但随后完整的内容就丢失了。如果我尝试以这种方式设置一些内容，同样的事情。我用google没有找到任何东西，每次我尝试搜索时，google都只找到router-outlet的东西。

Answer 1

ngOutlet 是一个 AngularJS 指令。如果您使用的是 Angular 2 或 4（我假设您认为您的代码中有 @Component），您可以使用 router-outlet 设置要显示的组件。它允许使用静态/动态路由进行静态/动态模板。

没有路由的替代方法是使用dynamic component loader。它还允许您在同一页面上有多个带有动态组件的指令，而路由器插座技术上不允许这样做。