Question

我对Angle不熟悉，所以我对角度函数不太熟悉。当前，我正面临一种情况，即我想在单击另一个组件中的功能时更改组件的数据。

在这里，单击组件1中的选项卡时，我想更改更改组件2中的数据。这是我到目前为止所尝试的。

第1组件HTML

<div class="portion1 clearfix">
                        <ul class="nav nav-pills second-list" role="tablist">
                           <li class="nav-item" *ngFor="let leads of result">
                              <a class="nav-link active" data-toggle="pill" href="#detail1" (click)="getleadmessages(leads.id)">
                                 <div class="mail-box clearfix">
                                    <div class="photo-box clearfix">
                                       <img src="assets/assetz/user/maillist/img/mail-user1.jpg" alt="icon">
                                    </div>
                                    <div class="des-box">
                                       <p class="p1">{{leads.name}}</p>
                                       <p class="p2">{{leads.email}}</p>
                                       <p class="p3">{{leads.phone}}</p>
                                       <p class="date-time">{{leads.send_on}}</p>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>

组件1 ts

// Get leads oa a specfic user
  public getLeadsByUser()
  {
    this.Jarwis.getLeadsByUser({user:this.token}).subscribe(
      data => this.handleResponse(data),
      error => this.handleError(error)
    );
  }
  // Handle response from api
  handleResponse(data){
    if(data.status == '1'){
      this.result = data.result;
    }
    else{
      this.msg = data.msg;
    }

  }// Handle error response from api
  handleError(error){
    this.error = error.error.errors;
    console.log(this.error);
  }
  getleadmessages(mailid){
    this.Userdatatransfer.setselectedmailid(mailid);
  }

将数据从组件1传输到组件2的服务

export class UserdatatransferService {

  public mailid = new BehaviorSubject('nomailid');
  selectedmailid = this.mailid.asObservable();

  constructor() { }

  setselectedmailid(data){ // set mailid using subject
    this.mailid.next(data); alert(data);
  }
}

组件2 html

<div id="detail1" class="tab-pane active clearfix">
    <div class="mail-box clearfix">
       <div class="photo-box clearfix">
          <img src="assets/assetz/user/maillist/img/mail-user1.jpg" alt="icon">
       </div>
       <div class="des-box">
          <p class="p1">David James</p>
          <p class="date-time">20-5-2018/  <span>2:45</span></p>
       </div>
    </div>
    <div class="detail-mail-container">
       <p class="detailed-mail"> on the Internet.<br />Thanks<br />David James</p>
       <div class="textarea-wrap">
          <textarea class="reply-box" id="reply-box"></textarea>
          <label for="#reply-box">Click here to</label>
       </div>
    </div>
 </div>
</div>

分量2 ts

export class MailboxmessagesComponent implements OnInit {

    constructor(private Jarwis:JarwisService,
      private router : Router,
      private http: HttpClient,
      private  _router : Router,
      private Userdatatransfer: UserdatatransferService) { }
    public result = null;

  ngOnInit() {
    this.Userdatatransfer.selectedmailid.subscribe(data => this.result = data); 
  }

}

Answer 1

有空的时候

<p>{{article}}</p>
<button (onclick)=loadArticle()>Load</button>

然后，您只需将内容分配给article就可以了。

例如组件：

article:string;

loadArticle(){
   this.article="some content";

}

Answer 2

父组件可以直接为其子组件设置一个值。但是，我看到您有两个同级组件。因此，共享服务将是最好的方法。

Angular 2 Sibling Component Communication

https://medium.com/@pandukamuditha/angular-5-share-data-between-sibling-components-using-eventemitter-8ebb49b64a0a

动态更改角度为6的组件中的数据

2 个答案: