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>