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>

然后完整的内容丢失了。如果我尝试以这种方式设置一些内容，也是一样的。我没有找到谷歌的任何东西，每次我尝试搜索，谷歌只发现路由器 - oulet东西。

Answer 1

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

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

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

1 个答案: