在路由中定义 Angular 组件内联？

Posted 2023-02-22

【中文标题】在路由中定义 Angular 组件内联？

【英文标题】：Defining Angular Component inline, in routes?

【发布时间】：2019-05-03 19:50:24

【问题描述】：

目前我这样定义我的路线：

export const myRoutes: Routes = [
     path: '', component: MyComponent ,
];

在我的模块中有RouterModules.forChild(myRoutes)。

如何使用完整的内联模板来内联定义这个组件？

寻找类似的东西：

 path: '/foo', component:  template: '<h1>foo</h1>'  

编辑：尝试

    path: '/test', component: Component(
      template: '<h1>Foo</h1>',
      styles: [':host color: red']
    )(class )

但是得到了这个错误：

错误：组件 class_1 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

使用：[MyComponent, ...declarations]，其中declarations 是来自过滤myRoutes 的const，有效，但仅适用于ng serve。 ng build --prod 错误：

错误：模块声明的意外值“null”

【问题讨论】：

看起来像 jsx ????

我猜。我的意思是，我想我可以使用 Angular Route 中的 data。

【参考方案1】：

my.component.ts

import  AfterViewInit, Compiler, Component, Input,
         NgModule, OnInit, ViewChild, ViewContainerRef  from '@angular/core';
import  ActivatedRoute  from '@angular/router';

@Component(
  selector: 'app-my',
  templateUrl: './my.component.html',
  styles: []
)
export class MyComponent implements OnInit, AfterViewInit 
  @Input() template: string;
  @Input() styles: string[];

  @ViewChild('container',  read: ViewContainerRef ) container: ViewContainerRef;

  constructor(private route: ActivatedRoute, private compiler: Compiler) 

  ngOnInit() 
    this.route.data
      .subscribe((data: template: string, styles?: string[]) => 
        this.template = data.template;
        this.styles = data.styles || [];
      );
  

  // https://github.com/angular/angular/issues/15275#issuecomment-434793800
  ngAfterViewInit() 
    // Must clear cache.
    this.compiler.clearCache();

    // Define the component using Component decorator.
    const component = Component(
      template: this.template,
      styles: this.styles
    )(class );

    // Define the module using NgModule decorator.
    const module = NgModule(
      declarations: [component]
    )(class );

    // Asynchronously (recommended) compile the module and the component.
    this.compiler.compileModuleAndAllComponentsAsync(module)
      .then(factories => 
        // Get the component factory.
        const componentFactory = factories.componentFactories[0];
        // Create the component and add to the view.
        const componentRef = this.container.createComponent(componentFactory);
      );
  

my.routes.ts

import  Routes  from '@angular/router';

import  MyComponent  from './my.component';

export const myRoutes: Routes = [
   path: '', component: MyComponent,
    data:  template: 'hello'  ,
   path: 'foo', component: MyComponent,
    data:  template: 'foo', styles: [':host color: red']  ,
   path: 'bar', component: MyComponent,
    data:  template: 'bar', styles: [':host color: blue']  ,
   path: 'can', component: MyComponent,
    data:  template: 'can', styles: [':host color: green']  
];

my.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  RouterModule  from '@angular/router';    

import  MyComponent  from './my.component';
import  myRoutes  from './my.routes';

@NgModule(
  declarations: [MyComponent],
  imports: [CommonModule, RouterModule, RouterModule.forChild(myRoutes)],
  providers: []
)
export class MyModule