组件内的 Angular 2/4 访问指令数据

Question

我有一个触发指令:

@Directive({
  selector: '[trigger]'
})

export class trigger {

    constructor(private svc: toggleService) {}

    @HostListener('click') onToggle() {
        this.svc.toggle();
    }
}

我还有一个目标指令:

@Directive({
  selector: '[target]'
})

export class target {

    constructor(private svc: toggleService) {}

    ngOnInit() {

        this.svc.onToggle.subscribe(
        (toggleState: boolean) => {
            this.toggleState = toggleState
        }
    }

}

他们通过服务进行通信。通信工作正常 - 目标成功从触发器接收 bool 状态。

<component-one>
   <button trigger></button>
</component-one>

<component-two>
   <div target></div>
</component-two>

如果我在目标内控制台登录，我会得到正确的切换状态。但是如何使toggleState 在组件二中可用？

Answer 1

您必须在这样的指令中使用@output

@Output() valueChange = new EventEmitter()

并在函数中使用

(toggleState: boolean) => {
            this.toggleState = toggleState
            this.valueChange.emit(toggleState)
        }

在您必须使用的按钮中

<div trigger (valueChange)="triggerChange($event)"></div>

您可以在triggerChange函数中获取值，您可以使用@input属性将其发送到第二个组件

或者您只需使用评论中描述的服务即可