angular组件调用组件方法,angular组件复用
本篇文章带大家了解一下有角的中的独立组件，看看怎么在有角的中创建一个独立组件，怎么在独立组件中导入已有的模块，希望对大家有所帮助！
角度14一项令人兴奋的特性就是有角的的独立组件终于来了。
在角度14中，开发者可以尝试使用独立组件开发各种组件，但是值得注意的是有角的独立组件的应用程序接口仍然没有稳定下，将来可能存在一些破坏性更新，所以不推荐在生产环境中使用。【相关教程推荐： 《angular教程》 】
如何创建一个独立组件
对于已有的组件，我们可以在@组件()中添加独立：真的，然后我们可以在没有@NgModule()的情况下直接使用进口导入其他模块了。
如果是新建组件，可以使用尼日利亚生成组件名-独立的命令，直接创建一个独立组件，例如：
尼日利亚生成组件按钮-列表-独立@组件({
选择器："应用程序-按钮-列表",
独立：真的，
进口：[
公共模块
],
templateUrl:“”./button-list.component.html ，
样式URL:[ ./button-list.component.scss]
})
导出类ButtonListComponent实现奥尼特
在独立组件中导入已有的模块
我们可以在进口中添加已有的模块，以MatButtonModule为例：
进口：[
公共模块
MatButtonModule，
],这样子我们就可以在ButtonListComponent中使用MatButtonModule的垫子按钮组件了：
按钮垫-基本按钮/按钮
按钮垫-按钮颜色=主要主要/按钮
按钮垫-按钮颜色=重音重音/按钮
按钮垫-button color=warnWarn/button
按钮垫-按钮禁用禁用/按钮
一个mat-button href= https://大明时代。github。io target= _ blank 链接/a效果图：
使用独立组件启动Angular应用
第一步，将AppComponent设置为独立组件：
@组件({
选择器："应用程序根目录",
templateUrl:“”./app.component.html ，
样式URL:[ ./app.component.scss]，
独立：真的，
})
导出类AppComponent {第二步，将AppModule的进口中的导入的模块加入到AppComponent的进口中，但是有两个模块例外：浏览器模块和浏览信息模块。
如果导入的话，可能会导致**浏览器模块已经加载。如果您需要访问诸如NgIf和NgFor之类的通用指令，请导入通用模块.**的问题：
第三步，删除应用程序模块文件
最后一步，将主页面中的：
从" @ angular/platform-browser-dynamic "导入{ platformBrowserDynamic }；
platformBrowserDynamic().bootstrapModule(AppModule)。catch(err=控制台。错误(err))；改为：
bootstrapapapplication(应用程序组件).catch(err=控制台。错误(err))；这样子我们就实现了使用独立组件启动有角的组件了。
为独立组件配置路由
我这里分别有三个独立组件：HomeComponent，ButtonListComponent和芯片列表组件，
然后在主页面中创建ROUTES对象
const ROUTES: Route[]=[
{
路径： ,
路径匹配："完整",
重定向到："家"
},
{
路径："主页",
组件：HomeComponent
},
{
路径："按钮",
loadComponent: ()=
导入(。/app/按钮列表/按钮列表。组件).然后（
(模)=模.ButtonListComponent
),
},
{
路径："芯片",
loadComponent: ()=
导入(。/app/芯片列表/芯片列表。组件)。然后（
(模)=模.芯片列表组件
),
},
];其中ButtonListComponent和芯片列表组件使用负载组件去实现路由懒加载。
然后在引导程序应用程序的第二个参数中使用提供者注册路由器模块好了。
引导应用程序(应用程序组件，{
提供商：[
importProvidersFrom(路由器模块。对于根([.路线])),
],
}).catch(err=控制台。错误(err))；效果图：
配置依赖注入
当我们想要启动有角的应用的时候，可能需要注入一些值或者服务。在引导程序应用程序，我们可以通过提供者来注册值或者服务。
比如，我有一个获取图片的url，需要注入到照片服务中：
引导应用程序(应用程序组件，{
提供商：[
{
提供："照片网址",
使用值： https://picsum.photos ，
},
{provide: PhotosService，useClass: PhotosService }，
importProvidersFrom(路由器模块。对于根([.路线])),
importProvidersFrom(http客户端模块)
],
})照片服务代码如下：
@可注射()导出类图片服务{
构造器（
@ Inject( photoUrl )private photoUrl:string，
私有http: HttpClient ) { }
public getPhotoUrl(I:number):string {
返回` $ { this。photourl }/200/300？random=$ { I } `；
}
}
源代码
本文所使用的源代码：https://github。com/damingerdai/angular-standalone-components-app
线上演示：https://大明二代。github。io/角度-独立-组件-应用/
更多编程相关知识，请访问：编程视频！以上就是浅析有角的中的独立组件，看看怎么使用的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。