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> и не зарегистрированы. Но я не могу узнать причину. Кто-нибудь может мне помочь? Спасибо.

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>