手动创建一个组件和引用组件

Posted 2022-05-09 rockyjs

组件存放在根组件中      链接：https://cli.angular.io/

一般我们要自定义的组件，会在单独的存放一个文件夹中 例如：components文件夹

方法一  .在app文件夹中新建components文件夹，

方法二  使用命令ng g 来创建

1）cd到项目中

2）输入ng  g 会出现一些提示

3）ng g component  components / news(新建一个news组件)

---

 

引用组件：

需要使用此组件，则需要在根组件中进行引用之后才可以使用

方式一，如果你是手动添加进去的，如需要在app_module.ts（根组件）中引用才可以

例如：新建一个news组件

在app.module.ts中 引用 import newComponent from ‘./components/news/news.component‘

　　　　@NgModule中配置（

　　　　　　declarations：[newsComponent] 添加进去

　　）

方式二：如果是命令添加进去的，只需要去根组件中进行查看，是否添加了（一般都会自动添加，无需在进行添加）

查看新建组件的名字（类似html的标签），引入的时候需要使用

---

 

查看组件的名字：

在news.component.ts组件中的@Component()中的selector后接的就是组件名：

@Component （

　　selector：‘组件名’, 例如组件名是app-news

　　templatenUrl:‘‘,

　　styleUrls[]

）

如果在根组件中引用news组件,则在app.component.html中使用

<app-news></app-news>

页面的内容还是需要写在对应组件中，也就是说写在news,component.html中

然后输入命令 ng serve --open 运行页面