Question

目前，我的路线定义如下：

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是过滤const的{{1}}，有效，但仅适用于myRoutes。 ng serve出现以下错误：

错误：模块声明了意外值'null'

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

在路线中内联定义Angular Component？

1 个答案:

my.component.ts

my.routes.ts

my.module.ts