> 웹 프론트엔드 > JS 튜토리얼 > Anglejs2의 구성요소 간에 값을 전송하는 방법의 예

Anglejs2의 구성요소 간에 값을 전송하는 방법의 예

零下一度
풀어 주다: 2017-05-16 10:15:56
원래의
2299명이 탐색했습니다.

AngualrJs2의 공식적인 방법은 @Input, @Output을 사용하여 구성 요소 간의 상호 값 전송을 구현하는 것이며, 구성 요소 간에는 부모-자식 관계가 있어야 합니다. 다음은 간단한 방법입니다. 구성 요소 간의 값 전송을 실현합니다. 상위-하위 구성 요소뿐만 아니라 교차 모듈 구성 요소도 값 전달을 실현할 수 있습니다

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

  //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法    
  profileInfo: any;
  
  }
로그인 후 복사
 /**
 *2.传递参数的组件,我这边简单演示,直接就在构造器里面实现传参了
 */ 
@Component({
  selector: 'XXXXXXX',
  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: 'YYYYYY',
  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;
  }
 }
로그인 후 복사

아이디어: 서비스를 매개 변수 전달을 위한 매체로 정의하고 이를 생성자에 주입합니다. 전달될 컴포넌트를 서비스에 추가합니다. 속성(매개변수 전송 매체)을 사용하여 값을 할당하고 획득하여 컴포넌트 간 매개변수 전송을 구현합니다.

위 데모는 간단한 아이디어를 제공하기 위한 것입니다. , 자유롭게 플레이 가능

[관련 추천]

1. 특별 추천: "php Programmer Toolbox" V0 .1 버전 다운로드

2 . 무료 js 온라인 비디오 튜토리얼

3.

php.cn Dugu Jiujian (3) -JavaScript 비디오 튜토리얼

위 내용은 Anglejs2의 구성요소 간에 값을 전송하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿