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

Question

I have a component named Modal when I am working in Angular. I want to open the same Modal Component from two different places. But I want that the text of button mentioned in Banner in the given picture should be "Get Started Now" See the Image.

Here is the image and code of modal.component.html with button.

<div class="modal-here">    
    <ng-template #content let-modal>
      <div class="modal-header">
        <h4 class="modal-title">Modal 1</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal 1 body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
      </div>
    </ng-template>
    <button class="btn post-task" (click)="openVerticallyCentered(content)">Post a task</button>
</div>

Here is the image and code of modal.component.ts Code

import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

    closeResult: string;

    constructor(private modalService: NgbModal) {}

    ngOnInit(): void {
    }

    openVerticallyCentered(content) {
        this.modalService.open(content, { centered: true, windowClass: 'setClass' });
    }

}

Here is header.component.html image of code, html and typescript code where I want the same modal with same Text in button as it is already placed

<header>
    <nav class="container navbar navbar-expand-md fixed-top nav-setting">
        <ng-container *ngFor= "let main_link of logo_link">
            <a class="navbar-brand brand-logo" href="{{main_link.href}}">
                <img class="img-fluid" src="../assets/images/logo.png">
            </a>
        </ng-container>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto left-menu">
                <app-modal></app-modal>
                <ng-container *ngFor= "let l_menu of left_menus">
                    <li class="nav-item">
                        <a class="{{l_menu.class}}" href="{{l_menu.routerLink}}">{{l_menu.text}}</a>
                    </li>
                </ng-container>
            </ul>
        </div>
        <div class="admin-side">
            <ul class="navbar-nav ml-auto right-menu">
                <ng-container *ngFor= "let r_menu of right_menus">
                    <li class="nav-item">
                        <a class="{{r_menu.class}}" routerLink="{{r_menu.routerLink}}">{{r_menu.text}}</a>
                    </li>
                </ng-container>
            </ul>
        </div>
    </nav>
</header>

Here is header.component.ts code

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

    logo_link = [
        {"href" : "http://localhost:4200/"}
    ]

    left_menus = [
    
        {"routerLink" : "", "text" :"Categories", "class" : "uper-line nav-link"},

        {"routerLink" : "/tasks", "text" :"Browse tasks", "class" : "uper-line nav-link"},
        
        {"routerLink" : "/how-it-works", "text" :"How it works", "class" : "uper-line nav-link"}
    ]
    right_menus = [
        {"routerLink" : "/sign-up", "text" :"Sign Up", "class" : "nav-link sign-up"},
        
        {"routerLink" : "/login", "text" :"Login", "class" : "nav-link login"},

        {"routerLink" : "/earn-money", "text" :"Become a Tasker", "class" : "nav-link tasker"}
    ]

    constructor() { }

    ngOnInit(): void {
    
    }

}

Here is app.component.html banner image of code, html and typescript code where I want to use same modal but text of button should be changed with "Get Started Now".

<app-header></app-header>
<div class="content" role="main">
    <div class="container-fluid banner position-relative">
        <div class="row bg-image">
          <div class="col-sm-12"></div>
        </div>  
        <div class="row align-items-center banner-content position-absolute m-0 w-100">
            <div class="col-sm-12">
                <div class="custome-container">
                    <h1 class="title banner-title">
                      Connect with experts to get the job done on Airtasker
                    </h1>
                    <p class="description banner-text">
                        It’s amazing what you can’t do yourself
                    </p>
                    <div class="banner-button">
                        <app-modal></app-modal>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="custome-container need-section">
                    <div class="inner-grid">
                        <h2 class="title">What do you need done?</h2>
                        <div class="services">
                            <div class="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<app-footer></app-footer>
<router-outlet></router-outlet>

Here is app.component.ts code.

import { Component } from '@angular/core';
import {NgbConfig} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Problemsolver';
  constructor(ngbConfig: NgbConfig) {
    ngbConfig.animation = true;
  }
}

Here is app.module.ts code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './header/header.component';
import { ModalComponent } from './modal/modal.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ModalComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    NgbPaginationModule,
    NgbAlertModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

CSS for all this code is here.

@font-face {
  font-family: Museo Sans Regular;
  src: url(assets/Fonts/MuseoSans-300.otf);
}
@font-face {
  font-family: Museo Sans Bold;
  src: url(assets/Fonts/MuseoSans_700.otf);
}
@font-face {
  font-family: Museo Sans Black;
  src: url(assets/Fonts/Museo-black.otf);
}
@font-face {
  font-family: MuseoSansBold;
  src: url(assets/Fonts/MuseoModerno-Bold.ttf);
}
body {
    font-family: Museo Sans Regular !important;
}
h1, h2{
    font-family: Museo Sans Black !important;
}
h3, h4, h5, h6{
    font-family: Museo Sans Bold !important;
}
.bg-image {
    background: url(../assets/images/top-banner.jpg);
    max-height: 616px;
    height: 100%;
    background-size: cover;
    background-position: top center;
}
.banner {
    height: calc(100vh - 120px);
    max-height: 616px;
    min-height: unset;
    background: rgb(41, 43, 50);
}
.custome-container {
    max-width: 944px;
    margin: auto;
    padding: 0px 32px;
}
.banner-content {
    top: 50%;
    left: 0px;
    transform: translateY(-40%);
}
.banner-title {
    font-size: 45px;
    color: #fff;
    margin: 0px 0px 16px;
}
.banner-text {
    color: rgb(255, 255, 255);
    font-size: 34px;
    font-weight: initial;
    line-height: 40px !important;
    letter-spacing: -0.15px;
    text-decoration: initial;
    text-align: initial;
    vertical-align: initial;
    font-style: initial;
    white-space: initial;
    margin: 0px;
    padding: 0px;
}
.banner-button {
    margin: 24px 0px;
}
.banner-button button {
    border-radius: 160px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0px;
    border-color: rgba(0, 0, 0, 0);
    border-width: 2px;
    border-style: solid;
    color: rgb(255, 255, 255);
    padding: 16px 24px;
    font-size: 18px;
    font-weight: initial;
    line-height: 24px !important;
    letter-spacing: 0.15px;
    background-color: rgb(224, 68, 109);
}
.modal-here {
    display: flex;
    height: 100%;
    align-items: center;
}
.post-task {
    background: #e0446d;
    border-radius: 200px;
    border: 2px solid rgba(41,43,50,.1);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: text-shadow .35s cubic-bezier(.615,.19,.305,.91),border .35s cubic-bezier(.615,.19,.305,.91);
    font-size: 11px;
    height: 31px;
    display: flex;
    letter-spacing: .44px;
    line-height: 27px;
    margin: 0 10px 0 20px;
    overflow: hidden;
    text-align: center;
    text-shadow: 0 1px 1px #9a0137;
    width: 94px;
    color: #fff;
    align-items: center;
}
.nav-setting {
    padding-left: 60px;
    padding-right: 60px;
}
.brand-logo img {
    width: 120px;
}
.navbar-brand.brand-logo {
    margin-right: 20px;
}
.nav-link {
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 41px;
    font-size: 13px;
    letter-spacing: .4px;
    position: relative;
    text-decoration: none;
    white-space: pre-wrap;
    padding: 0px 10px;
}
.nav-link:hover {
    opacity: 0.6;
}
.nav-item {
    display: flex;
    align-items: center;
}
.nav-link.tasker {
    margin-right: 4px;
    font-size: 11px;
    padding: 5.5px 14.1px;
    border-radius: 200px;
    display: inline-block;
    letter-spacing: .05em;
    transition: text-shadow .35s cubic-bezier(.615,.19,.305,.91),border .35s cubic-bezier(.615,.19,.305,.91);
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #fff;
    box-shadow: none;
    height: auto;
    opacity: 1;
}
.nav-link.tasker:hover {
    background-color: #fff;
    border: 1px solid #008fb4;
    color: #008fb4;
    opacity: 1;
}
.uper-line.nav-link:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    border-radius: 1.5px;
    height: 3px;
    left: 0;
    margin: auto;
    right: 0;
    width: 80%;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform .2s cubic-bezier(.615,.19,.305,.91);
    opacity: 0;
    top: -8px;
}
.uper-line.nav-link:hover:before{
    opacity: 0.6;
    transform: translateY(0);
}

Here is image which describe the actual result that I want.

Answer 1

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

...
closeResult: string;

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

那么在你modal.template.html:

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

现在，当您从任何其他 html 调用该组件时，您可以指定模式按钮的文本，将 <app-modal></app-modal> 替换为 <app-modal [buttonLabel]="'Get Started Now'"></app-modal> 或 <app-modal [buttonLabel]="'Post a task'"></app-modal>

Answer 2

If I use the answer given below by dear Mr. @Moshezauros I am facing few problems as following. I am putting code in Modal ts file as

...
closeResult: string;

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

Then Putting the modal buttons html code as:

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

Then I placed Modal Button in modal component html as:

<app-modal [buttonLabel]="'Post a task'"></app-modal>

After that I placed the in header as:

<app-modal [buttonLabel]="'Post a task'"></app-modal>

then after saving all this it is making errors not only with all this code but it disturbing other code also which is ok otherwise. as:

Answer 3

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

_btnLabel: string = '';

然后使用@Input

获取输入

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

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

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

现在在你需要值的组件的ts文件中设置一个变量。就像在这种情况下，转到 header.component.ts 文件并在 exports set 中定义一个具有所需值的变量，如：


_header: string = "Post a task";

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


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

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

Change the Text of Modal calling Button when it is called from any other component in AngularJS

typescript

angular-bootstrap

angular