Angular独立组件怎么使用

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

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

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

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

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

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

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{}

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{}