クリックして角をつけてコンポーネントを参照する

Question

私は別のコンポーネントをクリックして追加します。ユーザーはコンポーネントを追加して削除することもできますが、コンポーネントを削除することができます。角度4のクリックでコンポーネントリファレンスを取得します。私はその参照

を知っている場合にのみ成分を除去する機能を知ってここ は app.component.ts

@Component({ 
    selector: 'question-paragraph', 
    template: `<div class="form-group container"> 
    <textarea></textarea> 
    </div>`, 
}) 
export class QuestionParagraphComponent { } 

@Component({ 
    selector: 'question-image', 
    template: `<div class="form-group container"> 
    <form enctype="multipart/form-data" action="" method="post"> 
     <p>Upload Image</p> 
     <input type="file" name="uploaded_file[]" /> 
    </form> 
    </div>`, 
}) 
export class QuestionImageComponent { } 

にロードされているサンプルのコンポーネントであり、それは

if (item=='question') { 
     this.addService.appendComponentToBody(QuestionDetailComponent); 
     this.removeComponent(this.sg[this.sg['question_id']]); 
    } else if (item=='image') { 
     this.addService.appendComponentToBody(QuestionImageComponent); 
     this.removeComponent(this.sg[this.sg['question_id']]); 
     let componentRef = this.addService.appendComponentToBody(QuestionTypeComponent); 
     this.sg['ComRef'] = componentRef; 
    } 

それらを追加する機能です

removeComponent(componentRef){ 
    this.appRef.detachView(componentRef.hostView); 
    componentRef.destroy(); 
    } 

誰でも私に教えてください。 k、ありがとう。

Answer 1

通常、コンポーネントを動的に追加すると、それを親要素に追加します。リファレンスを追加し、その子にアクセスするコンポーネントに@ViewChildrenを追加できます。 2番目のパラメータは、あなたが動的に追加子にアクセスしたいものであるタイプViewContainerRefであり：

@ViewChildren(DynamicComponent, { read: ViewContainerRef }) components: QueryList<DynamicComponent> 

また、あなたが同様に使用さcreateComponentメソッドの戻り値を使用している可能性があります。

UPDATE： あなたのコンポーネントからの変更を購読することができますが、同様の参照：

this.components.changes().subscribe(x=> console.log(x));