Angular html嵌套

Question

假设我在一些上层类中有一些看起来像这样的角度模板代码

    <outer-component>
        <a></a>
    </outer-component>

<a> 可以是扩展在别处定义的某个接口的任何模块，<outer-component> 是否有办法获取<a> 或放置在标签内的任何内容并与之通信，特别是能够监听以和上面的 sn-p 一样简洁的方式绑定到函数或绑定到变量？

Answer 1

如果您想在父母和孩子之间共享数据（分层关系），您可以使用EventEmitter 允许父母从孩子那里获取数据。

在子组件中：

import { Component, Input, Output, EventEmitter } from 'angular/core';

@Component({
    selector: 'app-child',
    template: `
        <h3>Child</h3>
        Say {{message}}
        <button (click)="sendMessage()"></button>
    ´,
    styleUrls: ['pathToStyles.css']
 })

export class ChildComponent {

    message: string = "Hello world";

    @Output() messageEvent = new EventEmitter<string>();

    constructor() {}

    sendMessage() {
        this.messageEvent.emit(this.message);
    }
}

在父组件中：

import { Component } from '@angular/core';

@Component({
     selector: 'app-parent',
     template: `
     Message: {{message}}
          <app-child (messageEvent)="receiveMessage($event)"></app-child>
          `,
     styleUrls: ['pathToStyles.css']
})

export class ParentComponent {

    constructor() { }

    message:string;

    receiveMessage($event) {
        this.message = $event
    }
}