问题[angular5]

有 2 个组件 A 和 B，以及一个具有“获取数据”和“更新数据”两个功能的服务在数据库中。两个组件都使用数据模型，服务注册在公共模块中。更新数据库中的数据后如何在两个组件中获取更新的模型。? 那些。如何强制完成接收数据的功能？

我有条件在id="confirm_Password"创建或删除span包含内容的元素后，但这是使用完成的Jquery，您可以帮助将其转换为干净的typescript

if (data['password'] == data['confirm_Password']) {
                    $('.confirm_Password_message').remove();
                } else {

                     $('<span class="confirm_Password_message">Passwords do not match</span>').insertAfter($('#confirm_Password'));
                }

形式

config: FieldConfig[] = [
        {
            type: 'textarea',
            label: 'Description',
            name: 'description',
            placeholder: 'Description',
            value: '',
            validation: [
                {
                    name: 'required',
                    validator: Validators.required,
                    message: 'Description Required'
                }
            ]
        },
        {
            type: 'checkbox',
            label: 'Status',
            name: 'status',
            value: ''
        },
        {
            label: 'Submit',
            name: 'submit',
            type: 'button',
        }
    ];

表单html

<div class="modal-body">
        <app-dynamic-form #form="appDynamicForm" (submit)="formSubmitted($event)" [config]="config"></app-dynamic-form>
        <button type="button" class="btn btn-default float-right mr-2"  (click)="hideModal()">Close</button>
      </div>

一页上有几个routerLink，导致notes/:id：

routerLink="notes/1"
routerLink="notes/2"
routerLink="notes/3"
...

在同一个父组件中，该组件被<router-outlet></router-outlet>加载NoteView，它id查找并显示信息。在地址栏中的链接之间切换时id，组件会更改但不会重新加载，会与第一个id打开的链接挂起。每次单击不同的链接时，如何强制组件更新？Event在每次点击链接的时候，EventListner会不会太麻烦的解决方案，会有几个这样的组件。

路线是这样的：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'app',
    component: TodoAppParentComponent,
    children: [{
      path: 'notes',
      children: [{
        path: ':id', // id в ссылке меняется но компонент остается неизменным
        component: NoteViewComponent
      }]
    }]
  }
];

问题组件类

export class NoteViewComponent implements OnInit {

  id: string = null;
  note: object = null;

  constructor(
    private http: HttpService,
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit() {
    this.id = this.activatedRoute.snapshot.params['id']; // не срабатывает при переходе по разным routerLink, как сделать чтоб срабатывал?
    this.note = {
      title: 'Пример заголовка, заметка',
      body: `lorem....`
    };
  }
}

HTML 组件模板

<p>
  id: {{id}}
</p>
<div *ngIf="note">
  <h3>{{note.title}}</h3>
  <hr>
  <div class="body" innerHTML="{{note.body}}"></div>
</div>

屏幕

使用 Angular Material 5.2.4（客户端的选择列表组件）从客户端向服务器发送数据时出现问题。事实上，一个带有名称和 id 的复选框列表。因此，我无法将检查的 id 值数组发送到服务器，因为 浏览器仅对检查 MatListOption 做出反应，而由 id 组成的值本身，我无法从中获取。
这是component.html程序代码

<mat-selection-list 
(selectionChange)="onSelection($event.source.selectedOptions.selected)" >
<mat-list-option *ngFor="let car of cars" [value]="car.id" 
checkboxPosition="before" >
{{car.description}}
</mat-list-option>
</mat-selection-list>

组件.ts

 import { Component, OnInit } from '@angular/core';
 import { ListService } from '../list.service';

@Component({
  selector: 'app-list-measu',
  templateUrl: './list-measu.component.html',
  styleUrls: ['./list-measu.component.css']
})
export class ListMeasuComponent implements OnInit {
    cars: Array<any>;
    current_selected: string;
    id: Array<any> = new Array<any>();


  constructor(private listService: ListService) { }

  ngOnInit() {
      this.listService.getAllmeasures().subscribe(data => {
      this.cars = data;
    });
  }

  onSelection(e){
    console.log(e);       
    });

谢谢您的帮助！）

items数组中有 10 个对象，我只需要使用 size 变量显示前 4 个对象

app.component.html

<div class="prod-section">
  <div  *ngFor="let item of items">
    <h1>{{ item.id }}</h1>
    <p>{{ item.name }}</p>
  </div>
</div>

app.component.ts

  size: number = 4;

  items = [
      { id: 1, name: 'плитка' },
      { id: 2, name: 'плитка' },
      { id: 3, name: 'плитка' },
      { id: 4, name: 'плитка' },
      { id: 5, name: 'плитка' },
      { id: 6, name: 'плитка' },
      { id: 7, name: 'плитка' },
      { id: 8, name: 'плитка' },
      { id: 9, name: 'плитка' },
      { id: 10, name: 'плитка' },
  ];