Question

我的ng2应用程序中有3个类。第一个类管理，*ngIf正在使用哪个指令，默认情况下包含第二个类。在第二个类的模板中，我想从第一个类更改指令名，然后触发第一个类重新检查if语句，然后选择第三个类。

或者一般说来，用*ngIf检查要使用的指令是不好的做法吗？

修改

如GünterZöchbauer所述，这是我尝试做的一些代码：

/app/app.component.ts：

template: `
    <div *ngIf="template == 'menu'">
        <menu></menu>
    </div>
    <div *ngIf="template == 'entry'">
        <entries></entries>
    </div>
`
[...]
export class AppComponent {
    public template = "menu";

    public setTemplate(newTemplate: string) {
        this.template = newTemplate;
    }
}

/app/menu/menu.component.html：

[...]
(click)="setTemplate('entry')"
[...]

现在我正在寻找从app.component.ts而不是menu.component.ts中调用setTemplate('entry')的内容

Answer 1

我认为您应该在菜单组件中使用EventEmitter，因此您的来源可能如下所示：

/app/menu/menu.component.html：

[...]
<div (click)="fireMyEvent('categories')">Categories</div>
<div (click)="fireMyEvent('entries')">Entries</div>
[...]

@Output() myEvent: EventEmitter<string> = new EventEmitter();
fireMyEvent(evtParam: string) {
    this.myEvent.emit(evtParam);
}

/app/app.component.ts：

template: `
    <menu (myEvent)="setTemplate($event)"></menu>
    <div *ngIf="template == 'categories'">
        <categories></categories>
    </div>
    <div *ngIf="template == 'entries'">
        <entries></entries>
    </div>
`
[...]

或者从外面处理菜单组件本身的点击事件呢？

/app/app.component.ts：

    <div *ngIf="template == 'menu'">
        <menu (click)="setTemplate('menu')"></menu>
    </div>

Answer 2

您可以添加模板变量#menu。

如果添加它的标记是本机元素，则它包含对DOM元素的引用。如果是Angular组件，则会获得对组件的引用在表达式中，您可以像

一样引用它

<menu #menu (click)="menu.setTemplate($event)"></menu>

Angular2改变不同类的变量

2 个答案: