angularjs2でコンポーネント間で値を転送する方法の例-jsチュートリアル-php.cn

angularjs2でコンポーネント間で値を転送する方法の例

零下一度

リリース： 2017-05-16 10:15:56

オリジナル

2299 人が閲覧しました

AngualrJs2 の正式な方法は @Input, @Output を使用してコンポーネント間の相互の値の授受を実現することであり、コンポーネントは親子関係を持つ必要があります。ここでは、コンポーネント間の値の授受を実現するための簡単な方法を紹介します。親子コンポーネントやクロスモジュールコンポーネントでも値の受け渡しを実現できます

/**
 *1.定义一个服务，作为传递参数的媒介
 */
@Injectable()
export class PrepService{

  //定义一个属性，作为组件之间的传递参数，也可以是一个对象或方法    
  profileInfo: any;
  
  }

ログイン後にコピー

 /**
 *2.传递参数的组件，我这边简单演示，直接就在构造器里面实现传参了
 */ 
@Component({
  selector: &#39;XXXXXXX&#39;,
  templateUrl:"./XXXXXX.html",
  styleUrls:["./XXXXXXX.css"]
})

export class ReportComponent {

  //定义要传递的参数(此处是一个对象，也可以是方法)        
  reponsePrep:any ={
    name : "腊肉豆皮",
    address："中欧五花肉"
  }

  //构造器注入PrepService服务    
  constructor(private ps:PrepService){
    //把当前组件参数赋值给PrepService的profileInfo属性
    ps.profileInfo = this.reponsePrep;
  }
 }

ログイン後にコピー

  /**
 *3.接受参数的组件
 */ 
@Component({
  selector: &#39;YYYYYY&#39;,
  templateUrl:"./YYYYYYYY.html",
  styleUrls:["./YYYYYYY.css"]
})

export class commandComponent {

  //定义参来接收来自PrepService服务profileInfo属性的值
  requestPrep:any; 

  //构造器注入PrepService服务    
  constructor(private ps:PrepService){
    //把PrepService的profileInfo属性的值赋值给requestPrep实现组件的之间的传值
    this.requestPrep = ps.profileInfo;
  }
 }

ログイン後にコピー

アイデア: パラメーターを渡す媒体としてサービスを定義し、渡されるコンポーネントのコンストラクターにそれを注入し、属性を割り当てて取得します (サービス内のコンポーネント間でのパラメーターの値の転送

上記のデモは簡単なアイデアを提供するためのものであり、自由にプレイできます

[関連する推奨事項]

特別な推奨事項: 「php プログラマーツールボックス」V0.1 バージョンのダウンロード2.

無料の js オンラインビデオチュートリアル

3. php.cn Dugu Jiijian (3) - JavaScript ビデオチュートリアル

以上がangularjs2でコンポーネント間で値を転送する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。