Question

我经历了角度的英雄教程，我想尝试做一些不同的事情。所以我在路由之前就在Services tutorial。

项目来源可以在我的链接public Git repository找到。

目标是使用ng-bootstrap modal component来显示英雄详情，并允许进行持续的修改。

如何运行Git项目

$ npm install

$ npm start

该项目将在localhost:4200

上编译并打开

代码段

app.component.ts ：循环显示一系列英雄，并为每个英雄调用hero-modal。

  <h2>My Heroes</h2>
  <ul>
    <li style="list-style: none; padding-top: 3px;" *ngFor="let hero of heroes" 
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <hero-modal [hero]="hero"></hero-modal>
      <!--<span class="badge">{{hero.id}}</span> {{hero.name}}-->
    </li>
  </ul>

hero-modal.component.html ：为每个英雄创建一个按钮，按下该按钮将显示英雄详情。

<button type="button" class="btn btn-primary text-left" style="width:300px; align:left;" (click)="open()"><i class="fa fa-id-card-o fa-lg"></i>&nbsp;{{hero.name}}&nbsp;</button>

hero-modal.content.html ：传入的每个特定英雄的信息。此处的信息也可以更改为全局保留。（的 BROKEN ）

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Hero => {{name}}!</p>
  <div *ngIf="hero">
    <h2>{{hero.name}} details!</h2>
    <div>
      <label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name" />
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

Hero-modal.component.ts ：此类是上面链接的ng-bootstrap网站的模态教程的近似副本。我认为问题出现在这里，但（1）我不知道如何在此处传递信息。并且（2）一旦在模式中进行了数据更改，我就不确定如何将其全局保留下来。

import {Component, Input, ViewEncapsulation} from '@angular/core';
import { Hero } from '../hero';
import {NgbModal, NgbActiveModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'hero-modal-content',
  templateUrl: './hero-modal-content.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./hero-modal-content.css'] /** This contains the theme for the window **/
})
export class HeroModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'hero-modal',
  templateUrl: './hero-modal.component.html',
  styleUrls: ['hero-modal.component.css', '../app.component.css']
})
export class HeroModalComponent {
  @Input() hero: Hero;
  closeResult: string;
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(HeroModalContent, { windowClass: 'dark-modal' });
    modalRef.componentInstance.name = 'FR';
    modalRef.result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

基本上，我如何让模式全局保持设置，而不仅仅是现在，但如果它们关闭浏览器，设置也将保持不变。名称更改等我没有数据库可供使用，也不需要。每个用户都应该有独特的体验。饼干可能吗？如果是这样，我将如何将cookie纳入其中？我希望这个更新澄清了我的问题，如果没有。请让我知道我还能做些什么来清除它。谢谢。

目前的截图：

模块化英雄之角2

0 个答案: