指令在 ionic 3 中不起作用

Question

ionic 3 中的指令示例，之前使用的方法无效。已经尝试了在 ionic 2 中实现指令的方式。

import {Directive} from 'angular2/core';

@Directive({
   selector: 'test',
   template: './test.html'
)}
export class MyDirective { }

import {MyDirective } from './test'

@Page({
   templateUrl: '../page.html',
   directives: [MyDirective ],
})

Answer 1

这可以通过以下方式实现：

ComponentA，父组件

acomponent.ts

import {Component} from '@angular/core';

@Component({
    selector: 'component-a',
    templateUrl: 'acomponent.html'
})
export class ComponentA { }

acomponent.html

<div>
  <h3>Component A</h3>
  <component-b></component-b>
</div>

bcomponent.ts

import {Component} from '@angular/core';

@Component({
    selector: 'component-b',
    templateUrl: 'bcomponent.html'
})
export class ComponentB { }

bcomponent.html

<h3>Component B</h3>

app.module.ts

import { ComponentA } from 'pathto/acomponent';
import { ComponentB } from 'pathto/bcomponent';
//other imports here too

@NgModule({
  declarations: [
    ComponentA,
    ComponentB,
    //other declarations
  ],
  imports: [//your imports],
  bootstrap: [IonicApp],
  entryComponents: [
    ComponentA,
    ComponentB,
    //other entryComponents
  ],
  providers: [//your providers]
})
export class AppModule { }

当您导航到 ComponentA 时，它会将 ComponentB 注入选择器 <component-b></component-b>

希望这对您有所帮助

指令在 ionic 3 中不起作用

Directives not working in ionic 3

cordova

angular2-directives

ionic3