Angular2：无法解析我的指令的所有参数

Question

我正在编写一个指令，它依赖于TemplateRef<any>和ViewContainerRef。但我的指令不能让这些依赖关系注入下面是我的代码：

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
platformBrowserDynamic().bootstrapModule(AppModule); 

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { HelloWorld } from './HelloWorld.directive'; 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent, HelloWorld], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.ts

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

@Component({ 
    selector: 'my-app', 
    template: ` 
      Hello world! 
      <template [lcngHw]="true"><div></div></template> 
      ` 
}) 
export class AppComponent { 
} 

HelloWorld.directive.ts

import { Directive } from '@angular/core'; 
import { Input } from '@angular/core'; 

import { TemplateRef, ViewContainerRef } from '@angular/core'; 

@Directive({ 
    selector: '[lcngHw]' 
}) 
export class HelloWorld{ 
    constructor(private tf: TemplateRef<any>, private vc: ViewContainerRef){ 

    } 

    @Input() 
    set lcngHw(value: boolean) { 
     if (value) { 
      this.vc.createEmbeddedView(this.tf); 
     } 
     else { 
      this.vc.clear(); 
     } 
    } 
} 

这里是我的transpiled HelloWorld.directive.js：

"use strict"; 
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
    return c > 3 && r && Object.defineProperty(target, key, r), r; 
}; 
var core_1 = require('@angular/core'); 
var core_2 = require('@angular/core'); 
var HelloWorld = (function() { 
    function HelloWorld(tf, vc) { 
     this.tf = tf; 
     this.vc = vc; 
    } 
    Object.defineProperty(HelloWorld.prototype, "lcngHw", { 
     set: function (value) { 
      if (value) { 
       this.vc.createEmbeddedView(this.tf); 
      } 
      else { 
       this.vc.clear(); 
      } 
     }, 
     enumerable: true, 
     configurable: true 
    }); 
    __decorate([ 
     core_2.Input() 
    ], HelloWorld.prototype, "lcngHw", null); 
    HelloWorld = __decorate([ 
     core_1.Directive({ 
      selector: '[lcngHw]' 
     }) 
    ], HelloWorld); 
    return HelloWorld; 
}()); 
exports.HelloWorld = HelloWorld; 

然后我跑我的应用程序，我得到以下错误：

错误：（SystemJS）无法解析HelloWorld的所有参数：（？，？）。

Error: Can't resolve all parameters for HelloWorld: (?, ?). at CompileMetadataResolver.getDependenciesMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14268:21) at CompileMetadataResolver.getTypeMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14169:28) at CompileMetadataResolver.getDirectiveMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:13944:30) at eval (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14037:51) at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14031:51) at RuntimeCompiler._compileComponents (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16721:49) at RuntimeCompiler._compileModuleAndComponents (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16659:39) at RuntimeCompiler.compileModuleAsync (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16650:23) at PlatformRef_._bootstrapModuleWithZone (http://localhost:5000/node_modules/@angular/core/bundles/core.umd.js:6707:29) Evaluating http://localhost:5000/ViewContainerRefApp/main.js Error loading http://localhost:5000/ViewContainerRefApp/main.js at CompileMetadataResolver.getDependenciesMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14268:21) at CompileMetadataResolver.getTypeMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14169:28) at CompileMetadataResolver.getDirectiveMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:13944:30) at eval (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14037:51) at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14031:51) at RuntimeCompiler._compileComponents (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16721:49) at RuntimeCompiler._compileModuleAndComponents (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16659:39) at RuntimeCompiler.compileModuleAsync (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16650:23) at PlatformRef_._bootstrapModuleWithZone (http://localhost:5000/node_modules/@angular/core/bundles/core.umd.js:6707:29) Evaluating http://localhost:5000/ViewContainerRefApp/main.js Error loading http://localhost:5000/ViewContainerRefApp/main.js

我也是从这个live sample复制的代码，我得到了同样的错误。

看来TemplateRef<any>和ViewContainerRef的metadata没有注册。但我找不到原因。任何人都可以帮助我？谢谢。

Answer 1

你必须使用这些选项的结构指令之一：

<div *lcngHw="true"></div> 

<template [lcngHw]="true"><div></div></template> 

<div template="lcngHw true"></div> 

这样你就可以在你的组件注入TemplateRef

Plunker Example

这也可能是有用的：

• Angular2: How is ngfor expanded

Answer 2

如果您使用的是tsconfig.json，添加emitDecoratorMetaData：真

如果您使用Visual Studio没有tsConfig.json的 TypeScriptEmitDecoratorMetadata标签添加到您的项目文件 注意：您可能需要更多标签

<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> 
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments> 
    <TypeScriptSourceMap>true</TypeScriptSourceMap> 
    <TypeScriptTarget>ES5</TypeScriptTarget> 
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit> 
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled> 
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny> 
    <TypeScriptModuleKind>System</TypeScriptModuleKind> 
    <TypeScriptModuleResolution>node</TypeScriptModuleResolution> 
    <TypeScriptOutFile /> 
    <TypeScriptOutDir /> 
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations> 
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError> 
    <TypeScriptMapRoot /> 
    <TypeScriptSourceRoot /> 
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
</PropertyGroup>