Twitter bootstrap 模块化英雄之旅2

我看了《英雄之旅》关于angular的教程，我想尝试做一些不同的事情。所以我在路由之前

可以在“我的链接”上找到项目源

目标是使用来显示英雄的详细信息，并允许进行持续的编辑

如何运行Git项目

$npm安装

$npm开始

该项目将在

localhost:4200上编译和打开

代码片段

app.component.ts：循环浏览英雄列表，并为每个英雄调用
英雄模式

  <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>

基本上，我如何让模态全局保留设置，不仅是现在，而且如果它们关闭浏览器，设置也将保留。名称更改等。我没有数据库可供使用，也不需要数据库。每个用户都应该有独特的体验。也许是饼干？如果是这样的话，我将如何将cookies合并到这个中？我希望这次更新澄清了我的问题，如果不是的话。请让我知道我还能做些什么来清除它。多谢各位

当前屏幕截图：

代码在git存储库中。如果你愿意帮忙，请查看（上面有链接）。对我来说，上传一个项目并让你能在5秒钟内编译它来查看要容易得多。而不是用3个类来垃圾发布整个帖子，我正试图找出如何从一个modal@Claies如果我知道问题出在哪里，我就不会上传存储库了，那么如何从模式中持久化设置呢。克莱斯和我感谢你的帮助，但我不知道问题出在哪里。我不知道如何从modal获取信息并返回给家长。我花了一天半的时间来研究。如果我能说得更清楚的话，我会的。这不是学校的项目。我只是想学英语。也许最好的办法是去上课或做点什么谢谢你的尝试。@Claies好的，我会添加一些截图和我认为问题所在的片段，给我几分钟时间please@Claies我也写了一些片段
<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>

<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>

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}`;
    }
  }
}