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

他们通过服务在他们之间进行交流。通信效果很好 - 目标正在成功地从触发器中接收布尔态。

<component-one>
   <button trigger></button>
</component-one>
<component-two>
   <div target></div>
</component-two>

如果我在目标内登录，请获得正确的togglestate。但是如何使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属性发送到第二个组件

或简单地使用评论中所述的服务