angular - 更改同级组件的组件的公共(public)变量

Question

我有两个同级组件，它们是从我的 app.component 设置的:

<my-a></my-a>
<my-b></my-b>

<my-a> 的可见度由其组件中的公共(public)变量控制:

@Component({
  moduleId: module.id,
  selector: 'my-a',
  templateUrl: `<div *ngIf="visible">Hello World</div>`
})

export class MyAComponent {
    public visible = false;
}

我想更改 visible 的值单击 <my-b> 中的元素后:

@Component({
  moduleId: module.id,
  selector: 'my-b',
  templateUrl: `<div (click)="onClick()">Click Me</div>`
})

export class MyBComponent {
    onClick() {
        // stuff here
    }
}

如何设置visible = true在<my-a>来自<my-b> ？这个逻辑应该在父app.component中吗？ ？

编辑

感谢您的回答。我用几行 jQuery 实现了一些效果很好的东西:

@Component({
  moduleId: module.id,
  selector: 'my-b',
  templateUrl: `<div (click)="onClick('my-a')"></div>`
})

export class MyBComponent {
    onClick(element) {
        $(element).show(); // or hide() or toggle() or whatever
    }
}

如果我们想要更多元素，使用 jQuery 可以轻松扩展，而不是向每个组件添加发射器和输入。

我只是担心在 Angular2 中使用 jQuery 是不好的做法？

Answer 1

有几种方法可以做到这一点。 IMO 最简单的方法是使用 EventEmitter 和 Input。

组件A:

@Component({
  moduleId: module.id,
  selector: 'my-a',
  templateUrl: `<div *ngIf="visible">Hello World</div>`
})

export class MyAComponent {
    // listen for variable passed by parent
    @Input() visible;
}

组件B:

@Component({
  moduleId: module.id,
  selector: 'my-b',
  templateUrl: `<div (click)="onClick()">Click Me</div>`
})

export class MyBComponent {
    // creating EventEmitter to emit when onClick is called
    @Output() visible = new EventEmitter();
    onClick() {
        this.visible.emit();
    }
}

在父组件中:

@Component({
  moduleId: module.id,
  selector: 'parent',
  // passing variable visible to MyAComponent and listening for (onClick) from MyBComponent
  templateUrl: `<my-a [visible]="visible"></my-a>
                <my-b (onClick)="changeVisible()"></my-b>`
})

export class ParentComponent{
    private visible: boolean = false;
    // when MyBComponent emits event change visible value (which is then passed to MyAComponent)
    changeVisible() {
    if (this.visible === false) {
    this.visible = true;
    } else {
        this.visible = false;
        }      
    }
}

在更高级的情况下，您应该使用共享服务。