Angular自定义组件的创建与使用

这里面的selector是组件的引用名称，也就是你在其他地方使用这个组件的时候的名称，而HelloWorldComponent是导出的名称，在module.ts中引入组件的时候需要导入这个组件名。

使用 import {HelloWorldComponent} from './hello-world.component' 导入，然后在 @NgModule 下的 declarations 中间声明导入的组件。

比如app.component.html这个页面中去使用自定义的组件。

手动创建组件时，每次都需要自己添加新的组件到根模块中，比较繁琐，我们可以通过命令CLI来创建我们的Angular组件，它会自动帮我们添加到根模块中去。创建一个新的hello-wode模块。

使用完这个命令，他会自动帮我们创建一个新的文件夹，里面有四个文件：

同时app.module.ts根模块也会同步更新。

原理：

使用Angular2的命名路由插座，一个用来显示app正常的使用，一个用来显示d出框

浏览器的导航栏中则这样显示

路由配置

toast内容

创建用来跳转至popup路由的服务，例如popup.service

使用：

一、在app.module.ts中将服务导进来，注册

二、在使用的test.ts中导入

原文链接： https://blog.csdn.net/zhy13087344578/article/details/80930564

---