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));
})();

打字稿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请求并在控制台中显示I am here。但是tagForm指令的使用在里面是空的，对我而言，看起来Angular无法正确识别它。我以这种方式从其他tagForm指令使用tag diretcive：

<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。

Angular2 with ngUpgrade：Angular无法识别视图中的组件

1 个答案: