将值从指令发送到Angular中的组件

// 指令中使用@Output发送值
@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @Output() myValue = new EventEmitter<string>();

  someMethod() {
    const value = '传递给组件的值';
    this.myValue.emit(value);
  }
}

// 组件中接收值
@Component({
  selector: 'my-component',
  template: `
    <div>{{ receivedValue }}</div>
  `
})
export class MyComponent {
  @Input() receivedValue: string;
}

// 指令中使用服务发送值
@Injectable()
export class MyService {
  private myValueSubject = new Subject<string>();

  sendValue(value: string) {
    this.myValueSubject.next(value);
  }

  getValue(): Observable<string> {
    return this.myValueSubject.asObservable();
  }
}

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private myService: MyService) {}

  someMethod() {
    const value = '传递给组件的值';
    this.myService.sendValue(value);
  }
}

// 组件中接收值
@Component({
  selector: 'my-component',
  template: `
    <div>{{ receivedValue }}</div>
  `
})
export class MyComponent implements OnInit {
  receivedValue: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.getValue().subscribe(value => {
      this.receivedValue = value;
    });
  }
}