以角度2

Question

我在角度2中非常新。我在两个组件之间进行通信时遇到问题。当我有一个父项和一些子组件的布局时，使用@Input注释很容易设置子组件的变量。

但是现在我有一个父组件的布局（主要用于布局）和两个子组件：

子组件2有一堆按钮，只创建一个简单的消息。现在我想在子组件1中显示此消息。

我该如何解决？提前致谢

Answer 1

除了使用@Input / @Output和父组件作为“桥”的解决方案之外，常见的方法还是引入共享服务。该服务需要在父组件中提供，以便子项可以共享服务的单个实例（How do I create a singleton service in Angular 2?）。

使用BehaviorSubject as a delegate的基本示例：

@Injectable()
export class SharedService {

    messageSource: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }
}

子组件1：

export class ChildComponent1 {

    constructor(private _sharedService: SharedService) { }

    sendMessage(): void {
        this._sharedService.messageSource.next('Hello from child 1!');
    }
}

子组件2：

export class ChildComponent2 {

    constructor(private _sharedService: SharedService) {
        this._sharedService.messageSource.subscribe((message: string) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
     }
}

也请参阅此帖：Angular2 - Interaction between components using a service

Answer 2

一种简单的方法是将子组件2中的@Output输出设置为eventemitter，并在单击按钮时发出一个事件，并将消息作为数据传递。然后，在父组件中侦听此事件，并更新在事件发生时设置为子组件1的输入的属性。

下面的图片是一个清楚显示机制的例子

Answer 3

您可以使用@ViewChild和@Output更新子组件中的属性。

或者你也可以使用 @Input取代@ViewChild。

seidme建议的方法也可以正常使用。这取决于你的用例。

使用@ViewChild和@Output的示例： https://plnkr.co/edit/r4KjoxLCFqkGzE1OkaQc?p=preview

使用@Input和@Output的示例 https://plnkr.co/edit/01iRyNSvOnOG1T03xUME?p=preview

Answer 4

您可以使用模板变量来引用兄弟姐妹：

$Modal.on('show.bs.modal', function () {
    $Modal.find(".modal-content .modal-body").html(htmlSpinner);
    $.get('@Url.Action("ModalDetails")', { id: $(".mybutton").val() }, function (data) {
        $Modal.find(".modal-content .modal-body").html(data);

//after appending data to modal body
$(".fancybox").fancybox({
            helpers: {
                title: {
                    type: 'over'
                }
            }
        });
    });
});