javascript - 带有 ngUpgrade : Angular does not recognize component in view 的 Angular2

Question

在玩了几天 Angular 2 Hero 教程之后，我决定玩 ngUpgrade。 所以我使用 upgradeAdapter 引导 Angular 并降级 Angular 2 组件以匹配 Angular 1 版本:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {UpgradeAdapter} from "angular2/upgrade";
export const upgradeAdapter: any = new UpgradeAdapter();
import {TagFormController} from "../tags/form/TagFormController";

(function(): void {
    "use strict";
    upgradeAdapter.bootstrap(
        document.body,
        ["application"],
        {
            strictDi: true
        }
    );

    angular
        .module("application")
        .directive("tag-form", upgradeAdapter.downgradeNg2Component(TagFormController));
})();

typescript TagFormController:

/// <reference path="../../typings/angularjs/angular.d.ts" />
///<reference path="../../custom-ts-types/custom-ts-types.ts"/>

import {Component, Input, Output, OnInit} from "angular2/core";
    @Component({
        selector: "tag-form",
        templateUrl: "src/tags/form/tagForm.html",
    })
    export class TagFormController
    implements IAngularComponent, OnInit {
        @Input()
        public articles: any[];
        @Input()
        public mode: string;
        @Output()
        public saveTag: any;
        @Output()
        public goToEditMode: any;
        public tag: any;
        @Input()
        public tagId: number;
        @Input()
        public tagValue: number;
        @Input()
        public tagArticles: any[];
        @Output()
        public cancel: any;
        constructor() {
            console.log("Running");
        }

        public $onInit(): void {
            this.tag = {
                articles: this.tagArticles,
                id: this.tagId,
                value: this.tagValue,
            };
        }

        public ngOnInit(): void {
            this.tag = {
                articles: this.tagArticles,
                id: this.tagId,
                value: this.tagValue,
            };
        }

        public save(tag: any): void {
            if (typeof tag.id !== "number") {
                throw new TypeError("Id should be provided for tag, but is " +
                    typeof tag.id + " with value: " + String(tag.id));
            }
            console.log(tag.value);
            this.saveTag({
                $tag: tag
            });
        }
        public edit(tag: any): void {
            if (typeof this.cancel !== "function") {
                throw new TypeError("cancel function should be provided and will be checked later!");
            }

            if (typeof tag.id !== "number") {
                throw new TypeError("Id should be provided for tag, but is " +
                    typeof tag.id + " with value: " + String(tag.id));
            }
            this.goToEditMode({
                $tag: tag
            });
        }
        public cancelEdit(): void {
            this.cancel();
        }
    }
    console.log("I am here!");

如果我查看 Chrome 中的开发人员工具，一切都应该没问题，TagFormController 请求已发送，我在这里 显示在控制台中。 但是 tagForm 指令的用法内部是空的，对我来说，Angular 似乎无法正确识别它。我以这种方式从其他 tag 指令中使用 tagForm 指令:

<tag-form
        *ngIf="$ctrl.tagLoaded"
        [articles]="$ctrl.articles"
        [mode]="$ctrl.mode"
        (saveTag)="$ctrl.saveTag($tag)"
        (goToEditMode)="$ctrl.goToEditMode($tag)"
        [tag-id]="$ctrl.tag.id"
        [tag-value]="$ctrl.tag.value"
        [tagArticles]="$ctrl.tag.articles"
        (cancel)="$ctrl.cancel()">
</tag-form>

我必须知道我在做什么。也许重要的是我不将 SystemJS 用于项目的 Angular 1 部分，但在我编写 TagFormController 请求时已发送。你能看出我哪里出错了吗？如果有人帮助我，我将不胜感激 - 在此先感谢您!

Answer 1

也许您可以尝试以下方法:

angular
    .module("application")
    .directive("tagForm", upgradeAdapter.downgradeNg2Component(TagFormController));

代替:

angular
    .module("application")
    .directive("tag-form", upgradeAdapter.downgradeNg2Component(TagFormController));

这是一个有效的插件:http://plnkr.co/edit/2i46p48bTUN6jP9rTarR?p=preview .