@Input文字列をあるコンポーネントから別のコンポーネントに渡す方法

Question

あるコンポーネントのtsファイルから別のコンポーネントのHTMLファイルにデータを渡すことができます。以下のコードをご参照ください：

export class TestComponent { 

    @Component({ 
    selector: 'app-data', 
    }) 

    @Input() data : string; 
} 

をそして、私は、以下のようにのようにそれを使用することができる午前私の別のコンポーネントのHTMLファイルに：

<app-data [data] = "Hello"></app-data> 

私の質問は、HTMLの代わりに別のコンポーネントからのデータを渡すのですファイル、別のコンポーネントの.tsファイルから渡したいと思います。サービスとエミッタを使用して解決策を見つけましたが、@Output()を使用して解決したいと思います。

可能な解決方法を教えてください。

編集ユースケース：

私はそれにいくつかのテンプレートを持っている共有コンポーネントを追加しようとしています。テンプレートは、テンプレートが使用されているコンポーネントに基づいて更新されます。テンプレート要件に基づいて更新中の文字列メッセージがたくさんあります。

問題は、HTMLからすべての文字列を渡すとコードが汚れて見えることです。だから、HTMLから渡す代わりに、私はtsファイルから渡したいと思っています。

注：両方のコンポーネントは同じレベルです。

Answer 1

私はあなたがそれを望んでいる理由はわかりませんが、あなたは次のようなことをすることができます。

Child.component.ts

@Component({ 
    selector: 'child', 
    template: `{{data}}` 
}) 
export class ChildComponent { 
    data; 
} 

Parent.component.ts

あなたがの多くを渡したくない場合はご使用の場合

に基づいて

@Component({ 
    selector: 'parent', 
    template: `<child><child>` 
}) 
export class ParentComponent implements AfterViewInit { 
    // ViewChild lets you access your inner views. 
    // But, be careful, it may take some time to initialize your view. 
    @ViewChild(Child) childComponent: ChildComponent; 

    // you have to do it within this life cycle method 
    // so that you'll know your view is initialized. 
    ngAfterViewInit() { 
     this.childComponent.data = 'Hello World'; 
    } 
} 

パラメータを使用して、入力を定義し（設定と呼ぶ）、jsonオブジェクトを渡すことができます。

など。

Child.component.ts

export interface Settings { 
    optionA: string; 
    optionB: string; 
    optionC: string; 
} 

@Component({ 
    selector: 'child', 
    template: `{{settings?.optionA}}` 
}) 
export class ChildComponent { 
    @Input() settings: Settings; 
} 

Parent.component.ts

@Component({ 
    selector: 'parent', 
    template: `<child [settings]="mySettings"><child>` 
}) 
export class ParentComponent implements OnInit { 
    mySettings: Settings; 

    ngOnInit() { 
     this.mySettings = { 
      optionA: 'A', 
      optionB: 'B', 
      optionC: 'C' 
     }; 
    } 
}