Question

我是新手并且在学习angular。我有angularjs的背景。我有这样的应用程序结构。

// src /
//  app /
//       app-footer
//                  app-footer.component.css , app-footer-component.html,app-footer.component.ts
//       app-header
//                 app-header.component.css,app-header.component.html,app-header.ts           
//       home
//            home.component.css,home.component.html,home.component.ts
//       shared 
//              modals
//                    todo
//                         update-todo.css,update-todo.html,update-todo.ts

我正在使用ng-bootstrap并借助它我在点击时显示模态。我的home.component.html看起来像这样。

<div class="container home-page">
<div class="jumbotron text-center">
  <h1>I'm a Todo-aholic
  </h1>
</div>
<div id="todo-form" class="row">
  <div class="mx-auto col-sm-8 text-center">
    <form action="">
      <div class="form-group">
        <input type="text" name="something" [(ngModel)]="todo"  class="form-control input-lg text-center"  placeholder="I want to buy a puppy that will love me forever">
        <div class="add-button-todo-app">
          <button class="btn btn-primary" (click)="pushInTodoArr(todo) " [disabled]="todo =='' ? true : false">ADD</button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="list-of-todos">
  <ul>
    <li *ngFor="let item of todoArray;let i=index">
      <span class="tick">
        <i class="fa fa-check" aria-hidden="true"></i>
      </span>
      {{item}}
      <span class="trash" (click)="removeItemInTodoArr(item);">
        <i class="fa fa-trash" aria-hidden="true"> </i>
      </span>
      <span class="trash" (click)="content.openLg(content)">
        <i class="fa fa-pencil" aria-hidden="true"> </i>
      </span>
    </li>
  </ul>
</div>

<update-todo></update-todo>

和app.component.ts看起来像这样。

    import { Component, OnInit } from '@angular/core';
import { NgbdModalOptions } from '../shared/modals/todo/update-todo';


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

  /* todo array list */
  todoArray: String[] = [];
  todo: string = "";

  constructor() {

  }

  ngOnInit() {
  }

  /* Push data in todo array */
  pushInTodoArr(value) {
    this.todoArray.push(value);
    this.todo = '';
  }

  /* remove item in array */
  removeItemInTodoArr(key) {
    for (var i = this.todoArray.length - 1; i >= 0; i--) {
      if (this.todoArray[i] === key) {
        this.todoArray.splice(i, 1);
      }
    }
  }

  /* update item in array */
  updateItemInTodoArr(key,updatedValue) {
    for (var i = this.todoArray.length - 1; i >= 0; i--) {
      if (this.todoArray[i] === key) {
        this.todoArray[i] = updatedValue;
      }
    }
  }
}

它基本上是一个todo应用程序。其中添加了删除和更新。我想以模态更新字段。

这是我的update-todo.ts。

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

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'update-todo',
  templateUrl: './update-todo.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./update-todo.css']
})
export class NgbdModalOptions {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  openLg(content) {
    this.modalService.open(content, { size: 'lg' });
  }

}

现在我想打开弹出窗口并在点击更新图标上传递值。我正在调用此函数(click)="content.openLg(content)"，但我得到Cannot read property 'openLg' of undefined。

有人请指出我正确的方向。我在ng-bootstrap，ngx-bootstrap和ng2-bootstrap之间绊倒了。但我希望用ng-bootstrap。

来做

Answer 1

这就是我在我的应用中做到的方式：输入：

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';

构造

constructor(        
        private _modalService: NgbModal
    ) { }

呼叫：

onEdit(car: ICars) {
        const modalRef = this._modalService.open(RentACarDetailComponent, { size: 'lg' });
        modalRef.componentInstance.car = car;
        modalRef.componentInstance.type = 'edit';
        modalRef.componentInstance.pageTitle = 'Edit vehicle';
        modalRef.result.then((result) => {
            if (result) {
                let answer: number;
                this._rentACarService.editVehicle(result, 2)
                    .takeUntil(this.ngUnsubscribe)
                    .subscribe(
                    result => { answer = result; },
                    error => { this.errorMessage = <any>error; },
                    () => {answer > 0) {
                            this._helperService.showInfo('You have succesfully editet vehicle.', 5);
                            this.ngOnInit();
                        }
                    });
            }
        },
            (reason) => { });
    }

car, type and PageTitle被设置为模态组件中的输入

Ng Bootstrap - 如何从另一个组件调用另一个组件的模态组件？

1 个答案: