在Angular 6中,在主组件中切换两个子组件可以通过以下步骤完成:
ng generate component Component1
ng generate component Component2
这将会在src/app
目录下创建component1
和component2
文件夹,并生成相关的组件文件。
app.component.html
)中添加两个按钮,用于切换两个子组件的显示状态。示例代码如下:
上述代码中,showComponent1()
和showComponent2()
方法用于切换两个子组件的显示状态。*ngIf
指令根据showComponent1Flag
和showComponent2Flag
的值来决定是否显示相应的子组件。
app.component.ts
)中添加以下代码:export class AppComponent {
showComponent1Flag = false;
showComponent2Flag = false;
showComponent1() {
this.showComponent1Flag = true;
this.showComponent2Flag = false;
}
showComponent2() {
this.showComponent1Flag = false;
this.showComponent2Flag = true;
}
}
上述代码中,showComponent1()
和showComponent2()
方法分别将showComponent1Flag
和showComponent2Flag
的值设置为true
和false
,从而控制子组件的显示状态。
app.module.ts
)中,将两个子组件添加到declarations
数组中,以便让Angular能够识别它们。import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';
@NgModule({
declarations: [
AppComponent,
Component1Component,
Component2Component
],
...
})
export class AppModule { }
现在,当点击“Show Component 1”按钮时,Component1
将会显示;当点击“Show Component 2”按钮时,Component2
将会显示。