如何使用 angular 中的按钮单击事件将单个属性从父组件发送到子组件

Question

您好，我想将单个属性（groupId）从父组件传递给子组件，这里我的子组件是 ngx-bootstrap 模式，所以有什么解决方案。 基本上我想创建群组帖子，其中帖子对象也包含groupId，并且groupId在父组件中可用

---

父组件

group.component.ts

bsModalRef: BsModalRef;
group: any = {};

constructor(
  private router: Router,
  private route: ActivatedRoute,   
  private alertify: AlertifyService,
  private groupService: GroupService,
  private modalService: BsModalService
) { }

ngOnInit() {
   const id = +this.route.snapshot.paramMap.get('id');

   if (id) {
    this.groupService.getGroup(id)
     .subscribe(group => this.group = group);
   }
}

openModalWithComponent() {
   const initialState = {
     title: 'Add new post'
   };
   this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
   this.bsModalRef.content.closeBtnName = 'Close';
}

组.component.html

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="btn btn-primary btn-block">
        <button class="btn btn-primary fa fa-plus" (click)="openModalWithComponent()">Add 
         Post</button>
      </a>
    </div>
    <div class="col-md-3">
      <a class="btn btn-success btn-block" data-toggle="modal" data-target="#addCategoryModal">
        <i class="fa fa-plus"></i> Add Category
      </a>
    </div>
    <div class="col-md-3">
      <a class="btn btn-warning btn-block" data-toggle="modal" data-target="#addUserModal">
        <i class="fa fa-plus"></i> Add User
      </a>
    </div>
  </div>
</div>

---

子组件

这里的子组件基本上是 ngx-bootrap modal

post-modal.component.ts

title: string;
closeBtnName: string;
post: any = {};
postCaterogies;

constructor(
    public bsModalRef: BsModalRef,
    private postService: PostService
) { }

ngOnInit() {
    this.postService.getPostCategories()
    .subscribe(pCategories => this.postCaterogies = pCategories);
}

submit() {
  this.postService.createPost(this.post)
  .subscribe(post => {
     console.log(post);
  })
  this.bsModalRef.hide();
}

Answer 1

group.component.ts

bsModalRef: BsModalRef;
  group: any = {};

  constructor(
  private router: Router,
  private route: ActivatedRoute,   
  private alertify: AlertifyService,
  private groupService: GroupService,
  private modalService: BsModalService
  ) { }

  ngOnInit() {
   const id = +this.route.snapshot.paramMap.get('id');

   if (id) {
    this.groupService.getGroup(id)
     .subscribe(group => this.group = group);
   }
 }

  openModalWithComponent() {
const id = +this.route.snapshot.paramMap.get('id');
   const initialState = {
    title: 'Add new post',
groupId: id
  };
   this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
   this.bsModalRef.content.closeBtnName = 'Close';
  }

post-modal.component.ts

  title: string;
  groupId: number;
  closeBtnName: string;
  post: any = {};
  postCaterogies;

  constructor(
   public bsModalRef: BsModalRef,
   private postService: PostService) { }

   ngOnInit() {
     this.postService.getPostCategories()
       .subscribe(pCategories => this.postCaterogies = pCategories);
  }

  submit() {
   this.postService.createPost(this.post)
    .subscribe(post => {
     console.log(post);
   })
  this.bsModalRef.hide();
  }

Answer 2

group.component.ts

openModalWithComponent() {
const id = +this.route.snapshot.paramMap.get('id');
   const initialState = {
    title: 'Add new post',
groupId: id
  };
   this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
   this.bsModalRef.content.closeBtnName = 'Close';
this.bsModalRef.content.onClose = (myData) => {
      // Do something with myData and then hide
      this.bsModalRef.hide();
};
  }

post-modal.component.ts

onClose: any;
submit() {
   this.postService.createPost(this.post)
    .subscribe(post => {
     this.onClose({ value: post})
   })
  }