分享更有价值
被信任是一种快乐

Angular独立组件怎么使用

文章页正文上

这篇文章主要介绍“Angular独立组件怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular独立组件怎么使用”文章能帮助大家解决问题。在Angular 14中, 开发者可以尝试使用独立组件开发各种组件,但是值得注意的是Angular独立组件的API仍然没有稳定下,将来可能存在一些破坏性更新,所以不推荐在生产环境中使用。angular.io/guide/stand…standalone 是 Angular14 推出的新特性。它可以让你的 根模块 AppModule 不至于那么臃肿所有的 component / pipe / directive 都在被使用的时候 在对应的组件引入就好了举个例子 这是之前的写法 我们声明一个 Footer 组件然后在使用的 Module 中导入这个组件

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

@Component({
selector:'app-footer',
template:`
Footer
`, }) exportclassFooterComponent{}

import{NgModule}from'@angular/core';
import{CommonModule}from'@angular/common';
import{FooterComponent}from'./footer.component';

@NgModule({
declarations:[HomeComponent,FooterComponent],
exports:[],
imports:[CommonModule],
})
exportclassAppModuleModule{}

这种写法导致我们始终无法摆脱 NgModule但其实我们的意图就是在 AppComponent 中使用 FooterComponent换成 React 中的写法 其实会更便于管理和理解用上我们的新特性 standaloneFooter 组件就改造成这样免费云主机、域名

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

@Component({
selector:'app-footer',
//将该组件声明成独立组件
standalone:true,
template:`
Footer
`, }) exportclassFooterComponent{}

然后比如在 Home 页面 我们就可以这样使用

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

import{FooterComponent}from'@components/footer/footer.component';

@Component({
selector:'app-home',
standalone:true,
//声明需要使用的component/pipe/directive但是它们也必须都是独立组件
imports:[FooterComponent],
template:``,
})
exportclassWelcomeComponent{}

独立组件可以直接用于懒加载 本来我们必须借助 NgModule 来实现

import{NgModule}from'@angular/core';
import{RouterModule,Routes}from'@angular/router';

import{CustomPreloadingStrategy}from'@views/basic-syntax/router/customPreloadingStrategy';

constroutes:Routes=[
{
path:'home',
//之前想要实现懒加载这里必须是一个NgModule现在使用独立组件也可以并且更加简洁
loadComponent:()=>import('@views/home/home.component').then((mod)=>mod.HomeComponent),
},
];

@NgModule({
imports:[RouterModule.forRoot(routes,{preloadingStrategy:CustomPreloadingStrategy})],
exports:[RouterModule],
})
exportclassAppRoutingModule{}

关于“Angular独立组件怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: CSS盒模型的相关知识点有哪些

本篇内容主要讲解“CSS盒模型的相关知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS盒模型的相关知识点有哪些”吧! 我们先看个例子:下面的 div 元素的总宽度是多少呢?要回答这个问题,我们首先得弄…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册