1.概述:standalone 时在angular 14版本引入的特性,作用是可以让组件、指令和管道独立。以后就可以独立的直接被引入其他组件,而不依赖 ngmodule 来引入,也可以在路由中实现组件的懒加载。
1.1定义一个standalone组件:
//footComponent
import {Component} from '@angular/core';
@Component({
standalone: true,
selector: 'app-footer',
template: '<footer class="dark:bg-gray-800>Footer</footer>"',
})
export class FooterComponent{}
1.2可以被其他组件直接引入:
import {Component} from '@angular/core';
import {FooterComponent} from '@component/footer/foot.component';
@Componet({
selector: 'app-home',
standalone: true,
template: '<app-footer></app-footer>'
})
export class HomeComponent{}
1.3可以在路由中懒加载
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomPreloadingStrategy } from '@views/basic-syntax/router/customPreloadingStrategy';//预加载策略
const routes: Routes = [
{
path: 'home',
// 之前想要实现懒加载 这里必须是一个NgModule 现在使用独立组件也可以 并且更加简洁
loadComponent: () => import('@views/home/home.component').then((mod) => mod.HomeComponent),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
exports: [RouterModule],
})
export class AppRoutingModule {}
Q1: 引入独立组件的组件是否一定要设置独立属性?
应该不需要
Q2:RouterModule.forRoot()的真实含义,以及 CustomPreloadingStrategy 的含义?
RouterModule对象为提供了两个静态的方法:forRoot()和forChild()来配置路由信息。
RouterModule.forRoot()方法用于在主模块中定义主要的路由信息. RouterModule.forChild()与 Router.forRoot()方法类似,但它只能应用在特性模块(子模块)中。即根模块中使用forRoot(),子模块中使用forChild()。
CustomPreloadingStrategy 是自定义的预加载策略。
Q3: loadComponent 和 loadChildren 的区别
//loadComponent 实现组件的懒加载
loadComponent: () => import('@views/home/home.component').then((mod) => mod.HomeComponent)
// loadChildren 实现模块的懒加载
loadChildren: () => import('src/app/testexecution/testexecution.module').then(m => m.TestExecutionModule),
标签:forRoot,standalone,RouterModule,Component,home,组件,import,Angular
From: https://www.cnblogs.com/rushintocloud/p/17928205.html