2017-07-07 13 views
0

私は口を持つコンポーネントを持っています。今では、コンセントのコンテンツを動的に設定しようとしています。私の最初の試みは、DOM-Elementの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> 

しかし、完全な内容は失われます。このようにいくつかのコンテンツを設定しようとすると同じことです。私はGoogleで何かを見つけられなかった、私が検索しようとするたびに、Googleはrouter-ouletものしか見つけなかった。

答えて

0

ngOutletはAngularJS命令です。 Angular 2または4(あなたのコードに@Componentがあると思っていると仮定している)を使用している場合は、router-outletを使用して表示するコンポーネントを設定できます。静的/動的ルートを使用して静的/動的テンプレートを可能にします。

経路のない代替方法は、dynamic component loaderを使用することです。また、同じページに複数のディレクティブを動的コンポーネントで作成させることもできますが、ルータ出口では技術的にこれが許されません。

+0

コンポーネントをロードしたくない単純なテキスト – Sumafu

+0

次に、innerHTMLバインディング '[innerHTML] =" theHtmlString "' – snaplemouton

+0

を動的に使用することができますか? – Sumafu

関連する問題