添加具有默认布局的新组件
Adding new components with default layout
我刚刚下载了 angular 管理模板。然后我添加一个新组件:
ng g n test
当我导航到组件时,没有应用默认布局。我猜它使用 app.component 布局。你如何告诉组件它应该使用默认值 UI?
要添加新组件,请按照以下步骤操作:
- 创建组件名称-routing.module.ts 文件
- 创建组件-name.module.ts文件
- 创建组件-name.component.html文件
- 创建组件-name.component.ts文件
组件-name.component.ts文件:
import { Component, OnInit, Input } from "@angular/core";
@Component({
selector: 'app-componentName',
templateUrl: './component-name.component.html',
})
export class NameComponent implements OnInit {}
组件名-routing.module.ts文件
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NameComponent } from "./component-name.component";
const routes: Routes = [
{
path: '',
component: NameComponent,
data: {
title: 'route title'
},
children: [
{
path: '',
redirectTo: ''
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ComponentNameRoutingModule {}
组件-name.module.ts文件
// Angular
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
// Theme Routing
import { ComponentNameRoutingModule } from "./component-name-routing.module";
import { ComponentNameComponent } from "./component-name.component";
@NgModule({
imports: [
ComponentNameRoutingModule,
],
declarations: [
ComponentNameComponent
]
})
export class ComponentNameModule {
constructor() {}
}
所有这些都在 views 目录中的一个新文件夹中,您就可以开始了。
我刚刚下载了 angular 管理模板。然后我添加一个新组件:
ng g n test
当我导航到组件时,没有应用默认布局。我猜它使用 app.component 布局。你如何告诉组件它应该使用默认值 UI?
要添加新组件,请按照以下步骤操作:
- 创建组件名称-routing.module.ts 文件
- 创建组件-name.module.ts文件
- 创建组件-name.component.html文件
- 创建组件-name.component.ts文件
组件-name.component.ts文件:
import { Component, OnInit, Input } from "@angular/core";
@Component({
selector: 'app-componentName',
templateUrl: './component-name.component.html',
})
export class NameComponent implements OnInit {}
组件名-routing.module.ts文件
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NameComponent } from "./component-name.component";
const routes: Routes = [
{
path: '',
component: NameComponent,
data: {
title: 'route title'
},
children: [
{
path: '',
redirectTo: ''
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ComponentNameRoutingModule {}
组件-name.module.ts文件
// Angular
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
// Theme Routing
import { ComponentNameRoutingModule } from "./component-name-routing.module";
import { ComponentNameComponent } from "./component-name.component";
@NgModule({
imports: [
ComponentNameRoutingModule,
],
declarations: [
ComponentNameComponent
]
})
export class ComponentNameModule {
constructor() {}
}
所有这些都在 views 目录中的一个新文件夹中,您就可以开始了。