1

Angular 2 Hero チュートリアルで数日間遊んだ後、ngUpgrade で遊ぶことにしました。そこで、Angular をブートストラップしupgradeAdapter、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>

私は自分が何をしているのかを少し考えなければなりません。プロジェクトのAngular 1部分にSystemJSを使用しないことが重要かもしれませんが、私が書いたようにリクエスト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 に答える