将数据从组件发送到另一个组件
Send Data from Component to another Component
目标:
将变量的数据从应用程序组件发送到 SomeComponent。变量的值应该显示在模态主体内部。
问题:
我不知道如何解决它。有什么想法吗?
信息:
https://stackblitz.com/edit/ngx-modal-m9sctv
谢谢!
一些组件
<div class="modal-header">
<h4 class="modal-title pull-left"> {{ title }} </h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
selector: 'app-some',
templateUrl: './some.component.html',
styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {
title;
constructor(
public modalRef: BsModalRef
) { }
ngOnInit() {
}
}
应用组件
<div class="container my-1">
<div class="card">
<div class="card-body">
<h4>Ngx Bootstrap Modal Component</h4>
<div (click)="openModal()" class="btn btn-success">Modal Component</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { SomeComponent } from './some/some.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private test: string;
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal() {
this.test = "abcdef";
this.modalRef = this.modalService.show(SomeComponent, {
initialState: {
title: 'Modal title',
data: {}
}
});
}
}
在您的打字稿 public 变量中有初始状态对象。将同一对象传递给模态;更改数据对象属性以传递数据。
例如:-
Stackblitz url :- https://stackblitz.com/edit/ngx-modal-mvkgjy
代码:-
HTML :-
<div class="modal-header">
<h4 class="modal-title pull-left"> {{ title }} </h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{data?.item}}
</div>
TS :-
import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { SomeComponent } from './some/some.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public initialState = {
title: 'Modal title',
data: {}
};
private test: string;
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal() {
this.test = "abcdef";
this.modalRef = this.modalService.show(SomeComponent, {
initialState: this.initialState,
});
this.initialState.data["item"]=123;
setTimeout(() => this.initialState.data["item"] = 678, 2000);
}
}
目标:
将变量的数据从应用程序组件发送到 SomeComponent。变量的值应该显示在模态主体内部。
问题:
我不知道如何解决它。有什么想法吗?
信息:
https://stackblitz.com/edit/ngx-modal-m9sctv
谢谢!
一些组件
<div class="modal-header">
<h4 class="modal-title pull-left"> {{ title }} </h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
selector: 'app-some',
templateUrl: './some.component.html',
styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {
title;
constructor(
public modalRef: BsModalRef
) { }
ngOnInit() {
}
}
应用组件
<div class="container my-1">
<div class="card">
<div class="card-body">
<h4>Ngx Bootstrap Modal Component</h4>
<div (click)="openModal()" class="btn btn-success">Modal Component</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { SomeComponent } from './some/some.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private test: string;
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal() {
this.test = "abcdef";
this.modalRef = this.modalService.show(SomeComponent, {
initialState: {
title: 'Modal title',
data: {}
}
});
}
}
在您的打字稿 public 变量中有初始状态对象。将同一对象传递给模态;更改数据对象属性以传递数据。
例如:-
Stackblitz url :- https://stackblitz.com/edit/ngx-modal-mvkgjy
代码:-
HTML :-
<div class="modal-header">
<h4 class="modal-title pull-left"> {{ title }} </h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{data?.item}}
</div>
TS :-
import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { SomeComponent } from './some/some.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public initialState = {
title: 'Modal title',
data: {}
};
private test: string;
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal() {
this.test = "abcdef";
this.modalRef = this.modalService.show(SomeComponent, {
initialState: this.initialState,
});
this.initialState.data["item"]=123;
setTimeout(() => this.initialState.data["item"] = 678, 2000);
}
}