代码之家 › 专栏 › 技术社区 › A T

在管线中定义角度元件?

angular-router angular-components angular-directive angular-routing angular

A T · 技术社区 · 5 年前

目前我定义我的路线如下:

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

但有个错误:

错误:组件类_1不是任何NgModule的一部分,或者模块尚未导入到模块中。

使用: [MyComponent, ...declarations] 哪里 declarations 是一个 const 从过滤 myRoutes ,有效,但仅适用于 ng serve . ng build --prod 错误:

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

1 回复 | 直到 5 年前

A T 5 年前

我的.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);
      });
  }
}

我的.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}'] } }
];

我的.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 {}