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属性发送到第二个组件

或者只是您可以使用评论

中描述的服务

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

1 个答案: