526互联

Angular | standalone Component （一）

发布时间 2023-12-26 15:18:18作者: 两块五的菜鸟

指导链接：angular-Standalone-guide

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),