Question

我能够将数据从一个组件ts文件传递到另一个组件HTML文件。请参考下面的代码：

export class TestComponent {

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

  @Input() data : string;
}

在我的另一个组件HTML文件中，我可以使用它，如下所示：

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

我的问题是，我想从另一个组件.ts文件传递数据，而不是从另一个组件HTML文件传递数据。我找到了使用服务和发射器的解决方案，但我想使用@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对象。

E.g。

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'
       };
    }
}

如何将@Input字符串从一个组件传递到另一个组件

1 个答案: