Как я могу отправить одно свойство из родительского компонента в дочерний компонент с событием нажатия кнопки в angular

Question

Здравствуйте, я хочу передать одно свойство (groupId) из родительского компонента в дочерний компонент. Здесь мой дочерний компонент - модальный ngx- bootstrap, так что есть какое-то решение. По сути, я хочу создать групповое сообщение, в котором объект публикации также содержит идентификатор группы, а идентификатор группы доступен в родительском компоненте

---

родительский компонент

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';
}

group.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 модальный

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})
   })
  }