Angular學(xué)習(xí)之聊聊獨(dú)立組件（Standalone Component）-天天亮點(diǎn)

import { Component } from "@angular/core";@Component({  selector: "app-footer",  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,})export class FooterComponent {}

import { NgModule } from "@angular/core";import { CommonModule } from "@angular/common";import { FooterComponent } from "./footer.component";@NgModule({  declarations: [HomeComponent, FooterComponent],  exports: [],  imports: [CommonModule],})export class AppModuleModule {}

import { Component } from "@angular/core";@Component({  selector: "app-footer",  // 將該組件聲明成獨(dú)立組件  standalone: true,  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,})export class FooterComponent {}

import { Component } from "@angular/core";import { FooterComponent } from "@components/footer/footer.component";@Component({  selector: "app-home",  standalone: true,  // 聲明需要使用的 component / pipe / directive 但是它們也必須都是獨(dú)立組件  imports: [FooterComponent],  template: `<app-footer></app-footer>`,})export class WelcomeComponent {}

import { NgModule } from "@angular/core";import { RouterModule, Routes } from "@angular/router";import { CustomPreloadingStrategy } from "@views/basic-syntax/router/customPreloadingStrategy";const routes: Routes = [  {    path: "home",    // 之前想要實(shí)現(xiàn)懶加載 這里必須是一個(gè)NgModule 現(xiàn)在使用獨(dú)立組件也可以 并且更加簡(jiǎn)潔    loadComponent: () => import("@views/home/home.component").then((mod) => mod.HomeComponent),  },];@NgModule({  imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],  exports: [RouterModule],})export class AppRoutingModule {}