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> 

Plunker Example

はこれも役に立つかもしれない、あなたのコンポーネントでTemplateRefを注入することができますこの方法：

• Angular2: How is ngfor expanded

Answer 2

あなたがemitDecoratorMetaDataを追加し、tsconfig.jsonを使用している場合はtrue

あなたはtsConfig.jsonなしでVisual Studioを使用している場合は、あなたのプロジェクトファイル ノートに 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>