当从AngularJS中的任何其他组件调用模态调用按钮时，更改其文本

当我在Angular中工作时，我有一个名为Modal的组件。我想从两个不同的地方打开相同的模态组件。但我想，在给定的图片中，横幅中提到的按钮文本应该是“立即开始”，请参见图片

以下是带有按钮的modal.component.html的图像和代码

模式1
&时代；
模态1主体&hellip

接近
发布任务

这是modal.component.ts代码的图像和代码

从'@angular/core'导入{Component，OnInit}；
从'@ng bootstrap/ng bootstrap'导入{NgbModal，modaldismissreases}；
@组成部分({
选择器：“应用程序模式”，
templateUrl:'./modal.component.html'，
样式URL:['./modal.component.css']
})
导出类ModalComponent实现OnInit{
closeResult：字符串；
构造函数（私有modalService:NgbModal）{}
ngOnInit（）：void{
}
OpenVerticallyCenter（内容）{
this.modalService.open（内容，{centered:true，windowClass:'setClass'}）；
}
}

这里是header.component.html代码、html和typescript代码的图像，我希望在按钮中使用与已放置的相同文本的相同模式

您需要在modal.component.ts上添加输入，然后更新该modal的html：

...
closeResult: string;

@Input() buttonLabel: string;
...
}

然后在modal.template.html中：

...
<button class="btn post-task" (click)="openVerticallyCentered(content)">{{buttonLabel}}</button>

。。。
{{buttonLabel}}

现在，当您从任何其他html调用组件时，您可以指定模态按钮的文本，将
替换为
或

如果我使用尊敬的@Moshezauros先生给出的以下答案，我将面临以下几个问题。
我把代码放在模态ts文件中作为


然后将模式按钮html代码放在如下位置：

{{buttonLabel}


然后，我将模态按钮放在模态组件html中，如下所示：


那么在保存了所有这些之后
它不仅在所有这些代码中出错，而且还会干扰其他代码，否则也可以。作为：

您应该在modal.component.ts中添加一个变量，然后在modal.component.html文件中使用该变量的值

_btnLabel: string = '';

<button>{{_btnLabel}}</button>


<app-modal [btnLabel] = "_header"></app-modal>


然后使用@input获取输入

@Input()
set btnLabel(value) {
    this._btnLabel = value;
}

现在可以在modal.component.html文件中使用该值

_btnLabel: string = '';

<button>{{_btnLabel}}</button>


<app-modal [btnLabel] = "_header"></app-modal>


在html文件中获取此定义值，如本例中的header.component.html文件

_btnLabel: string = '';

<button>{{_btnLabel}}</button>


<app-modal [btnLabel] = "_header"></app-modal>



我有同样的问题。寻找答案。请有人回答。#Moshezauros感谢您的回答，但先生，这是一个错误“在@Input（）：buttonLabel:string；”中找不到名称“buttonLabel”。@NadeemArif-检查我的更新，示例中的“：”不正确仍然存在错误“``src/app/header/header.component.html:14:45-错误NG5002:解析器错误：在C:/Users/Muhammad Nadeem Arif/Desktop/ANGULAR/Problemsolver/src/app/header/header.component中的[Post a task]第6列出现意外标记“a”。html@13：44 14``@NadeemArif，是的，我犯了另一个错误，请尝试[buttonLabel]=“发布任务”-我们传递的是字符串，而不是变量，因此您需要“和”（而不是“仅”或“仅”）让我解释一下发生了什么亲爱的@Moshezauros。我正在添加一些图片来解释这一点。请看下面的答案块，我正在添加解释作为下面的答案。错误表明模态组件上没有名为buttonLabel的属性-确保所有文件都已保存（最重要的是，这里是modal.component.ts）是的，我保证了，但仍然是一样的。一切似乎都正常，请尝试关闭IDE（visual studio代码？），重新运行ng serveYes我也尝试过。事实上，我已经试过很多次了。如果你喜欢我，为什么不把上面讨论的代码放到你的IDE中运行呢。也许你会更清楚地理解它。我的Angular应用程序才刚刚开始，我所有的代码都是在安装Angular CLI时附带的文件。我创建了3个组件使用名称页眉、模式、页脚。以及在app.component.html中工作，我已经显示了上面讨论的横幅。我创建了一个横幅。是的，这是正确的答案。最后我得到了解决方案。非常感谢亲爱的@Ahmad.Kamal。你给我支持。我非常感谢。非常感谢。