备用视图（隐藏/显示）

Question

我的页面中有两个组件，第一个组件在加载页面时始终显示，第二个组件隐藏。按下Tab键时，必须显示第二个组件而不是第一个组件，以便我们可以交替显示视图。有没有办法在Angular2中做到这一点？ 这是我的代码。 这是第一个组成部分：

import { Component } from '@angular/core';

@Component({
selector: 'my-informations',
template: `
<div id="info">
              /*Informations here*/
              `
})
export class InformationsComponent {
}

第二部分也是如此：

import { Component } from '@angular/core';

@Component({
selector: 'chat-box',
template: `<div id="chatBox">
<p>{{title}}</p>
<div id="msg"> </div>
<textarea rows="2" cols="50" placeholder="Enter your message here..."></textarea>
</div>`
})
export class ChatBoxComponent {
    title = 'CHAT';
}