相关疑难解决方法(0)

我认为在Angular-cli树抖动中排除组件的问题非常相似,但我似乎无法从中得到任何东西.

基本上我有一个动态组件工厂,如我如何使用/创建动态模板来编译动态组件与Angular 2.0？.

当我使用最新的Angular CLI和非生产设置构建它时,一切正常.但是,一旦我使用生产设置,我在尝试加载具有动态创建内容的页面时立即在浏览器中获得以下错误跟踪:

例外:找不到'e'的NgModule元数据.
ORIGINAL STACKTRACE:
main.dc05ae9 ... .bundle.js:格式:4731
错误:找不到'e'的NgModule元数据.
at t(vendor.c18e6df ... .bundle.js:格式化:76051)
at t.resolve(vendor.c18e6df ... .bundle.js:格式化:20624)
at t.getNgModuleMetadata(vendor.c18e6df ... .bundle.js:formatted: 20169)
在t._compileModuleAndAllComponents(vendor.c18e6df ... .bundle.js:格式化:40462)的t._loadModules(vendor.c18e6df ... .bundle.js:格式化:40474
)
at t.compileModuleAndAllComponentsSync(vendor.c18e6df ... .bundle. js:格式化:40436)
在e.createComponentFactory(main.dc05ae9 ... .bundle.js:格式:4789)

这是我的组件工厂类:

@Injectable()
export class DynamicTypeBuilder {    
  constructor() {
  }

  private _cacheOfFactories: {[templateKey: string]: ComponentFactory<any>} = {};
  private compiler: Compiler = new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();

  public createComponentFactory<COMPONENT_TYPE>(type: any, template: string, additionalModules: any[] = []): Observable<ComponentFactory<COMPONENT_TYPE>> {

    let …

我正在使用带有依赖注入库的TypeScript,它与Angular 1非常相似 - 基本上:使用依赖项作为参数注册工厂.

这就是我在ES6中注册课程的方法

export let factory = () => {
    return class Foo {}
};

如果我在TypeScript中写相同:

export let factory = () => {
    return class Foo {}
};

它无法编译错误

错误TS4025:导出变量'factory'已经或正在使用私有名称'Foo'.

有没有办法允许TypeScript从工厂函数返回一个类？

我做了构建-prod并遇到了一个奇怪的错误,即_zone_symbol__error:

Error: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded at d (http://localhost:4200/polyfills.cd321326a3dfc08ceb46.bund

我没有在我的应用程序中手动使用编译器.最奇怪的是错误似乎来自polyfill.我怎么解决这个问题？

下面是我创建动态模块的初始代码:

protected createComponentModule(componentType: any) {

    @NgModule({
        imports: [
            ComponentModule 
        ],
        declarations: [
            componentType
        ],
    })
    class RuntimeComponentModule {
    }
    return RuntimeComponentModule;

}

虽然我将在下面的代码上实现AOT,但它会给我一个错误:

找不到'RuntimeComponentModule'的NgModule元数据

我通过更改下面的代码找到了一些Articals的解决方案,我的错误消失了:

default class RuntimeComponentModule 
{
}

但是它提出了新的错误:

修饰符不能出现在这里

它不允许我在方法中装饰@NgModule.

有没有办法在angular2中动态加载模板？在angular1中,我使用ng-include html在主控制器视图中加载不同的模板.我知道angular2只能接受1个templateUrl并且ng-include在angular2中进行了Google搜索并找不到任何引用.

我正在尝试在最终版本2.0.0中动态加载组件.

使用RC5我使用以下代码加载:

创建一个指令来加载控件:

import {
  CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';

@Directive({
      selector: '[ctrl-factory]'
    })
    export class ControlFactoryDirective implements OnChanges {
      @Input() model: any;

      constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
      }

      create(cp) {
        this.resolver.resolveComponent(cp)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
            let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
            ch.model = this.model;
        });
      }

      ngOnChanges() {
        if (!this.model) return;

        switch (this.model.type) {
          case 'checkbox':
            this.create(CheckboxComponent);
            break;
          case 'checkboxlist':
            this.create(CheckboxListComponent);
            break;
          case 'datepicker':
            this.create(DatePickerComponent);
            break;
          default:
            break; …

我正在尝试做的angular 2.1.0是动态创建应该注入父组件的子组件.例如父组件是lessonDetails包含用于所有课程如像按钮共享的东西Go to previous lesson,Go to next lesson和其他东西.基于路径参数,应该是子组件的课程内容需要动态注入父组件.子组件的HTML(课程内容)在外面的某处定义为普通字符串,它可以是以下对象:

export const LESSONS = {
  "lesson-1": `<p> lesson 1 </p>`,
  "lesson-2": `<p> lesson 2 </p>`
}

通过innerHtml在父组件模板中使用类似的内容,可以轻松解决问题.

<div [innerHTML]="lessonContent"></div>

在路径参数的每次更改的情况下lessonContent,父组件的属性将改变(将从LESSON对象获取内容(新模板)),从而导致更新父组件模板.这有效,但角度不会处理通过注入的内容,innerHtml因此无法使用routerLink和其他东西.

在新的角度释放之前,我使用来自http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/的解决方案解决了这个问题,我一直在使用ComponentMetadata它ComponentResolver来动态创建子组件, 喜欢:

const metadata = new ComponentMetadata({
  template: this.templateString,
});

当templateString传递给子组件的Input属性为子组件.双方MetaData并ComponentResolver已被弃用/去掉angular 2.1.0. …

我在用什么

• 角度的

我想做什么

• 我有一个清单。当我按下按钮时，我想将一些自定义属性附加到某个HTML元素

是）我有的

• 我的HTML清单

• 与点击事件相关的按钮

我不确定该怎么办

• 当我单击按钮时，以下属性将添加到“容器” div中：

[phantomOp] =“ myItems” [myOper] =“ oper”

的HTML

<div class="container">
  <ul>
    <li> Albums </li>
    <li> Dates </li>
    </ul>
</div>

<button (click)="addContainerAttributes"> Add Container Attributes </button>

单击按钮后，我希望HTML看起来如何

<div class="container" [phantomOp]="myItems" [myOper]="oper">
  <ul>
    <li> Albums </li>
    <li> Dates </li>
  </ul>
</div>

TS

addContainerAttributes(){
  // Not entirely sure what to put here
}

目前我正在用这段代码动态加载我的一些组件.

export class ComponentOutlet {

    constructor(
        private vcRef: ViewContainerRef,
        private compiler: Compiler,
        private dataService: DataService
    ) { }

    private _createDynamicComponent() {

        // Some logic to decide which component should be loaded
        return MyComponent;
    }


    ngOnChanges() {

        this.compiler.compileComponentAsync(this._createDynamicComponent())
            .then(factory => {
                const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
                this.vcRef.clear();
                this.vcRef.createComponent(factory, 0, injector);
            });
    }

问题是MyComponent有一些@Input和Output绑定.是否可以在此处设置此绑定？我怎样才能做到这一点？

有没有一种方法可以直接从html中的标签角度到延迟加载组件<my-component></my-component>？

在组件模板解析期间,angular应该在找到任何html中没有或尚未加载的新标记时将整个组件加载到浏览器中.

我知道我们可以加载一个模块,使用loadChildren该模块仅特定于路由,还需要加载模块及其组件.我只搜索组件,直接搜索组件而不是模块.

我不想使用路由器或不想在我的应用程序中导入组件ot模块.我想当angular2找到一个不在html5中的标签时,它将在spcictfic文件夹中搜索并加载js和html文件并将该组件注入特定标签