1

在玩了几天 Angular 2 Hero 教程后，我决定玩 ngUpgrade。所以我引导 AngularupgradeAdapter并降级 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指令：

<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已发送。你能看出我哪里出错了吗？如果有人帮助我，我将不胜感激 - 提前谢谢你！

4

1 回答 1

3

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

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

代替：

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

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

于 2016-03-25T19:53:44.330 回答