0

非常にうまく機能するこの素晴らしいAngular2 Seedを使用して、Angular 2 アプリケーションを作成しました。だから私が持っている質問は、この Angular 1 ディレクティブをどのようにアップグレードできるかということです:

import template from './sbgOutlineButton.html!text';

var app = angular.module('sbgOutlineButton', []);

app.directive('sbgOutlineButton', function() {
    let link = function(scope, element, attributes) {
        if (attributes.icon === undefined) {
            let materialIcon = element.find('i.material-icons');
            materialIcon.addClass('hidden');
        }

    };

    return {
        link: link,
        restrict: 'E',
        template: template,
        replace: true,
        transclude: true,
        scope: { icon: '@' }
    };
});

export default app;

次の Angular 2 コンポーネントで使用できるようにします。

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { UpgradeAdapter } from '@angular/upgrade';

@Component({
    moduleId: module.id,
    selector: 'test-page',
    templateUrl: 'testpage.page.html',
    styleUrls: ['testpage.page.css']
})
export class TestPage implements OnInit {
    constructor() { }
    ngOnInit() { }
}

どうすればこれを達成できるかについて、何か考えがありますか？それは可能ですか？私の調査中に見つけた他の記事の多くは、「ベース」アプリケーションがAngular 1であるべきであることを示唆しているため...

前もって感謝します。フランソワ

4

2 に答える 2

0

angular1 ディレクティブを angular2 ディレクティブに変換するのはどうですか?

注: 役に立つかどうかはわかりませんが、ご覧ください。

ここでデモを見てください: https://plnkr.co/edit/4Fhtm76iJl0aQmgjO7n0?p=preview

customeDirective.ts

import {Directive, Attribute,ElementRef,Renderer} from '@angular/core';

@Directive({
  selector: '[myAttr]'
})

export class myDir {
    constructor(@Attribute('icon') private icon,private el:ElementRef,private rd: Renderer){
    console.log(this.icon);
    if(this.icon===null){    //<--- you can play here as per your need.
      console.log('icon is undefined');
    }
    else{
            rd.setElementClass(el.nativeElement, 'myClass',true);
    }
    console.log(el.nativeElement); 
  }
}

AppComponent.ts

//our root app component
import {Component} from '@angular/core';
import {myDir} from 'src/customDirective';

@Component({
  selector: 'my-app',
  directives:[myDir],
  template: 
  `
  <style>
    .myClass{
      color:red;
      background:yellow;
    }
  </style>


    <div myAttr icon="myIcon">Angular2</div>  <!-- icon attribute is present so it will add the class -->

            <!-- OR USE BELOW HTML INSTEAD OF ABOVE -->

    <div myAttr>Angular2</div>                 <!-- icon attribute is not present so it gives null -->


  `
})
export class App {}
于 2016-08-05T12:20:02.493 に答える
-5

Guideを使用してangular2にアップグレードする必要があります"@angular/upgrade": "2.0.0-rc.4",

私の調査中に見つけた他の記事の多くは、「ベース」アプリケーションがAngular 1であるべきであることを示唆しているため...

既にAngular 1プロジェクトがあり、1つにアップグレードしたい場合です。Angular2 はベースとして angular1 を必要としません

angular2でディレクティブを書く

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

私の最初の属性ディレクティブ

私を強調してください！

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [HighlightDirective]
})
export class AppComponent { }

angular1を2つに混同する必要はありません..

于 2016-08-05T12:11:14.710 に答える