角度：动态变化内容

Question

我有一个带有ng-outlet的组件。现在我尝试动态设置插座内容。我的第一次尝试是设置DOM元素的innerText属性，但组件模板的所有其他内容都会丢失。也许我使用了一种完全错误的方式，我对Angular很陌生。角度：动态变化<ng-outlet>内容

这里是我的组件：

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-出口量）：

<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。它还允许您在同一页面上使用动态组件的多个指令，而router-outlet技术上不允许这样做。