Добавление новых компонентов с макетом по умолчанию

Question

Я только что скачал угловой шаблон администратора. Затем я добавляю новый компонент:

ng g n test

При переходе к компоненту макет по умолчанию не применяется. Я думаю, что он использует макет app.component. Как вы говорите компоненту, что он должен использовать интерфейс по умолчанию?

Answer 1

Чтобы добавить новый компонент, выполните следующие действия:

1. создать файл component-name-routing.module.ts
2. создать файл component-name.module.ts
3. создать файл component-name.component.html
4. создать файл component-name.component.ts

Файл component-name.component.ts:

import { Component, OnInit, Input } from "@angular/core";

@Component({
    selector: 'app-componentName',
    templateUrl: './component-name.component.html',
})

export class NameComponent implements OnInit {}

файл component-name-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 {}

файл component-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() {}

 }

Все это в новой папке в каталоге просмотров, и вам будет хорошо.