Question

我会使用How to do inter communication between a master and detail component in Angular2?来解决这个问题，但现在不允许使用指令。如何将我的数组从第一个组件传递到另一个组件？

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

import { MdDialog, MdDialogRef } from '@angular/material';


@Component({
  selector: 'app-flashcards',
  templateUrl: './flashcards.component.html',
  styleUrls: ['./flashcards.component.scss'],

})
export class FlashcardsComponent {
  dialogRef: MdDialogRef<MnemoDialog>;

  constructor (private router: Router,public dialog: MdDialog) {} //router in function

  mnemo = ['assets/images/family.png', 'assets/images/blood-m.png','assets/images/obrazek.jpg','assets/images/asdfas.jpg'];
  n = 0;

  myMnemo = this.mnemo[this.n];

  nextImg() {

      this.myMnemo = this.mnemo[this.n];
      n++;

    }
  }

}


@Component({
  selector: 'mnemo-dialog',
  template: `<img fxFlex="70%"  md-card-image src="{{ myMnemo }}">`
})
export class MnemoDialog {

}

Answer 1

@Component({
  selector: 'mnemo-dialog',
  template: `<img fxFlex="70%"  md-card-image src="{{ source }}">`
})
export class MnemoDialog {
    @Input()source: YOURDATATYPE;
}

在你的flashcards.component.html中有这样的东西：

 <mnemo-dialog [source]="myMnemo"></mnemo-dialog>

或者这是不允许的？

如何在没有指令的情况下在Angular2中的主组件和详细信息组件之间传递数组？

1 个答案: