Question

如何创建不尊重app.module设计的组件（即具有自己模板的独立组件）？

Answer 1

根据angular-cli的此命令创建一个组件及其模板 ..，并在同一文件夹中创建一个ng g c componentName文件，该文件将用于导出组件。

index.ts

index.ts

要使用此组件的模板，请将export { componentName } from './componentName.component.ts';添加到其模块的ComponentName中的项目中的任意位置。

Answer 2

这是在Angular中创建组件的方法 创建英雄组件

使用Angular CLI，生成一个名为heroes的新组件。

ng生成组件英雄

CLI创建一个新文件夹src / app / heroes /并生成HeroesComponent的三个文件。

HeroesComponent类文件如下： app / heroes / heroes.component.ts（初始版本）

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

您总是从Angular核心库中导入Component符号，并使用@Component注释组件类。

@Component是一个装饰器函数，用于指定组件的Angular元数据。

CLI生成了三个元数据属性：

selector— the component's CSS element selector
templateUrl— the location of the component's template file.
styleUrls— the location of the component's private CSS styles.

CSS元素选择器'app-heroes'与在父组件模板中标识该组件的HTML元素的名称匹配。

ngOnInit是生命周期挂钩。Angular在创建组件后不久调用ngOnInit。这是放置初始化逻辑的好地方。

始终导出组件类，以便您可以将其导入其他地方（例如AppModule中）。

您可以点击以下Angular链接：https://angular.io/tutorial/toh-pt1

如何创建一个单独的角组件？

2 个答案: