blocks|key|2481041|text|看到这个答案，你可以在没有任何外部库的情况下创建自定义模式：Angular+2.0+and+Modal+Dialog|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2481042|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/34513558/angular-2-0-and-modal-dialog^0|U|S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

See this answer , you can create a custom modal without any external library:
<a href="https://stackoverflow.com/questions/34513558/angular-2-0-and-modal-dialog">Angular 2.0 and Modal Dialog</a>

blocks|key|26152|text|问题是NgbModule只对应用程序中的模块可用，而对其他模块不可用。当导入一个模块(这里是NgbModule)时，它仅特定于该模块。因此，您必须将NgbModule包含在另一个模块中，或者将其导出到当前模块中并将当前模块导入到另一个模块中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|26153|在其他模块中导入|26154|@NgModule({
++imports:+[
++++NgbModule,
++],|code-block|syntax|javascript|26155|或者导入第二个模块中已经包含NgbModule模块的第一个模块。|26156|entityMap^0|3|9|1A|9|22|9|0|0|0|E|9|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

The problem is the <code>NgbModule</code> is available to the module and not other module in your application. When when imports a module ( here <code>NgbModule</code>) it is specific to that module only. So either you have to include <code>NgbModule</code> in the other module or export that in the current module and import current module in the other module.

import it in the other module

<pre><code>@NgModule({
 imports: [
 NgbModule,
 ],
</code></pre>

Or import the first module in the secound which already included the <code>NgbModule</code> module.

blocks|key|2691420|text|使用Observable创建一个服务，并触发和发出单击close按钮的用户。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2691421|一旦单击了close按钮，就可以在任何其他组件中捕获该事件并执行操作。|2691422|服务|BOLD|2691423|@Injectable()
export+class+SomeService+{
+++public+popup:+Subject<any>+=+new+Subject<any>();

++constructor()+{}
}|code-block|syntax|javascript|2691424|有模式关闭的组件。|2691425|constructor(SomeService:+SomeService){
++this.SomeService.popup.subscribe((val)=>{
+++++if(val+===+'close')+{
+++++++//+close+the+modal
+++++}
+++});
}|2691426|现在，从另一个组件中，您可以触发事件以关闭模型。您可以从任何组件执行关闭。|2691427|constructor(private+SomeService:+SomeService)+{}

SomeMethod()+{
++this.someService.popup.next('close');
}|2691428|entityMap^0|2|A|0|0|0|2|0|0|6|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|16|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|17|8|@$9|18|A|19|B|J]]|D|@]|E|$]]|$1|R|3|S|5|M|7|1A|8|@]|D|@]|E|$N|O]]|$1|T|3|U|5|6|7|1B|8|@]|D|@]|E|$]]|$1|V|3|W|5|M|7|1C|8|@]|D|@]|E|$N|O]]|$1|X|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|Y|$]]

Create a service with <code>Observable</code> and trigger and emit which user click on the close button. 

Once the close button clicked, the event can be catched in any other component and action can be performed.

Service

<pre><code>@Injectable()
export class SomeService {
 public popup: Subject&lt;any&gt; = new Subject&lt;any&gt;();

 constructor() {}
}
</code></pre>

Component which have modal to close.

<pre><code>constructor(SomeService: SomeService){
 this.SomeService.popup.subscribe((val)=&gt;{
 if(val === 'close') {
 // close the modal
 }
 });
}
</code></pre>

And now from the other component, you can trigger the event to close the model. you can perform the close from any component.

<pre><code>constructor(private SomeService: SomeService) {}

SomeMethod() {
 this.someService.popup.next('close');
}
</code></pre>

blocks|key|24711|text|我刚刚遇到了同样的问题，并找到了这个帖子，Aniruddha+Das在突出显示基本需求方面做了很好的工作，但我发现它遗漏了TemplateRef的用法，这是下一部分，以防其他人有这个问题，我会完成它。使用与Aniruddha相同的模型|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|24712|模板：|24713|<ng-template+#updatemodal>
++<div+class="modal">
++++stuff+here...
++</div>
</ng-template>|code-block|syntax|javascript|24714|组件：|24715|@ViewChild('updatemodal')
private+modalRef:+TemplateRef<any>;

private+myModal<any>;

constructor(SomeService:+SomeService,+modalService:+NgbModal){
++this.SomeService.popup.subscribe((val)=>{
+++++if(val+===+'open')+{
+++++++this.myModal+=+this.modalService.open(this.modalRef);
+++++}
+++});
}|24716|引用已创建的模式是在响应中允许更多使用和灵活性的一种很好的方法，并通过使用：|24717|this.myModal.result.then((result)+=>{
++++++this.closeResult+=+`Closed+with:+${result}`;
++++},+(reason)+=>+{
++++++this.closeResult+=+`Dismissed+${this.getDismissReason(reason)}`;
++++});|24718|从NgBootstrap站点|24719|entityMap|0|LINK|mutability|MUTABLE|url|https://ng-bootstrap.github.io/#/components/modal/examples^0|L|D|0|0|3|0|0|0|3|0|0|0|0|1|B|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|W|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

I just came across the same problem and found this thread, Aniruddha Das did a great job of highlighting the basic requirements but I found it missed the TemplateRef usage which is the next bit and just in case anyone else has this issue I'll finish it. using the same model as Aniruddha's

Template:

<pre><code>&lt;ng-template #updatemodal&gt;
 &lt;div class="modal"&gt;
 stuff here...
 &lt;/div&gt;
&lt;/ng-template&gt;
</code></pre>

Component:

<pre><code>@ViewChild('updatemodal')
private modalRef: TemplateRef&lt;any&gt;;

private myModal&lt;any&gt;;

constructor(SomeService: SomeService, modalService: NgbModal){
 this.SomeService.popup.subscribe((val)=&gt;{
 if(val === 'open') {
 this.myModal = this.modalService.open(this.modalRef);
 }
 });
}
</code></pre>

Referencing the modal that has been created is a great way to allow more use and flexibility within the response and by using:

<pre><code>this.myModal.result.then((result) =&gt;{
 this.closeResult = `Closed with: ${result}`;
 }, (reason) =&gt; {
 this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
 });
</code></pre>

from the <a href="https://ng-bootstrap.github.io/#/components/modal/examples" rel="nofollow noreferrer">NgBootstrap</a> site

blocks|key|2481334|text|app.module.ts中的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2481335|：|ordered-list-item|2481336|2481337|{+...imports+...，entryComponents:+ModalComponent，...+}|2481338|编写您的模型，作为您使用模态：|unordered-list-item|2481339|
的组件的"Components+as+content“部分|2481340|-+import+ModalComponent+and+dependencies
-+constructor(private+modalService:+NgbModal)
-+preferable+put+this+into+a+method:|code-block|syntax|javascript|2481341|常量模式=+this.modalService.open(ModalComponent)；modal.componentInstance.title+=“对话”；modal.componentInstance.body+=“您的消息”；|2481342|​|2481343|entityMap^0|0|D|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$]]|$1|I|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|16|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|18|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|19|8|@]|D|@]|E|$T|U]]|$1|V|3|W|5|6|7|1A|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|10|$]]

<ol>
<li>In <code>app.module.ts</code>:

<pre><code>{
 ...
 imports [...],
 entryComponents: [ModalComponent],
 ...
}
</code></pre></li>
<li>Write your model, as part "Components as content" from <a href="https://ng-bootstrap.github.io/#/components/modal/examples" rel="nofollow noreferrer">here</a>.</li>
<li>In the component where you use the modal:

<ul>
<li>import ModalComponent and dependencies</li>
<li>constructor(private modalService: NgbModal)</li>
<li>preferable put this into a method:

<pre><code>const modal = this.modalService.open(ModalComponent);
modal.componentInstance.title = "Dialog";
modal.componentInstance.body = "Your message";
</code></pre></li>
</ul></li>
</ol>

I want to open or close modals from Another Module with the help of component 1. But currently I am unable to access the modalRef of ngBootstrap of the modals in that component so that I can close/open it.

Suppose this scenerio

One Module

<pre><code>&lt;component1&gt;&lt;/component1&gt;
</code></pre>

Another Module
this module have multiple components and each component have modal in it which I need to show or hide based on the conditions from component 1.

<pre><code>&lt;component2&gt; //have ng bootstrap modal in it &lt;/component2&gt;
&lt;component3&gt; //have ng bootstrap modal in it &lt;/component3&gt;
&lt;component4&gt; //have ng bootstrap modal in it &lt;/component4&gt;
&lt;component5&gt; //have ng bootstrap modal in it &lt;/component5&gt;
&lt;component6&gt; //have ng bootstrap modal in it &lt;/component6&gt;
</code></pre>

Currently I am doing this by just putting one hidden button in that module and the click it using the JavaScript from another component, I know that this is not a good approach so I want someone to give me some approach to calling these modals or tell me if there is anything to change in the design.

As far as I know I think service will be good to do this. But before changing the design I want someone opinion. Thanks

how to open ng bootstrap modals from another component?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在component 1的帮助下打开或关闭另一个模块中的modals。但目前我无法访问该组件中modals的modalRef，以便我可以关闭/打开它。假设这个场景单模块<component1></component1>另一个模块这个模块有多个组件，每个组件都有模式，我需要根据组件1的条件显示或隐藏它。<compon...

问如何从另一个组件打开ng引导模式？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从另一个组件打开ng引导模式？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从另一个组件打开ng引导模式？
EN