小编enn*_*oid的帖子

我认为我有基本概念,但有一些晦涩难懂

所以一般来说这就是我使用observable的方式:

observable.subscribe(x => {

})

如果我想过滤数据,我可以使用:

import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators';
observable.pipe(
    map(x => {return x}),
    first()
    ).subscribe(x => {

})

我也可以这样做:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';

observable.map(x => {return x}).first().subscribe(x => {

})

所以我的问题是:

1. 有什么不同？
2. 如果没有区别,为什么功能管存在？
3. 为何这些功能需要不同的进口？

我有以下组件结构

• 项目
  • 编辑项目
  • 子ressource1
  • 子ressource2
  • 子ressource3

所以我的路由看起来像这样:

const childroutes = [
  {
    path: '',
    children: [
      { path: 'edit', component: EditProjectComponent},
      { path: 'subres1', component: Subres1Component},
      { path: 'subres2', component: Subres2Component},
      { path: 'subres3', component: Subres3Component},
      { path: 'subres4', component: Subres4Component}
    ]
  }
]

{
    path: 'project/:projectId', 
    component: ProjectDetailComponent,
    children: childroutes,
    resolve: { project: ProjectResolver} /** resolve Project from ProjectService **/
}

正如您所看到的,我从服务中解析了Projectdata,并可以通过ProjectDetailComponent访问它们

this.route.snapshot.data

所以现在的问题是,如何将"EditProjectComponent"中解析的数据传递给它的所有childroutes组件？

我现在可以执行以下操作来解决子组件中的项目数据:

const childroutes = [
  {
    path: '',
    children: [
      { path: 'edit', component: EditProjectComponent,resolve: …

嘿,有什么方法可以添加到铁页的转换？目前我只是创建一个自定义元素,一个铁页面的"克隆",并添加铁选择行为.我在元素上使用css过渡:

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/iron-selector/iron-selectable.html">

<dom-module id="envo-pages">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        overflow: hidden;
      }

      :host > ::slotted(*) {
        background: #f1f1f1;
        position: absolute;
        top:0;
        left:0;
        width: inherit;
        height: inherit;
        transform: translateY(-100%);
        transition: all .5s ease-in-out;
      }

      :host > ::slotted(.iron-selected) {
        transform: translateY(0);
      }
    </style>
    <slot></slot>
  </template>

  <script>
    /**
     * `envo-pages`
     * 
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class EnvoPages extends Polymer.mixinBehaviors([Polymer.IronSelectableBehavior], Polymer.Element) {
      static get is() { return 'envo-pages'; }

      constructor(){
        super() …

我尝试了解 GabageCollector 在组件被破坏后如何​​工作。我有以下案例：

应用程序组件：

export class AppComponent {
  testCompoments = [1,2];

  removeOne(id){
    this.testCompoments.pop()
  }

  nop(){

  }
}

应用程序HTML：

<ng-container *ngFor="let t of testCompoments">
  <app-test [id]="t" (close)="removeOne($event)"></app-test>
</ng-container>
<br>

空 FN

测试组件：

export class TestComponent implements OnInit {

  @Output()
  public close = new EventEmitter()

  @Input()
  id;

  constructor() { }

  ngOnInit() {
  }

  closeClick(){
    this.close.emit(this.id)
  }

}

测试HTML：

<p>{{id}}</p>
<button (click)="closeClick()">close</button>

现在，当我启动应用程序并拍摄堆快照时，我会看到内存中正确数量的对象：

然后我通过单击关闭按钮删除组件并拍摄新快照：

让我惊讶的是，居然还有两个物体？现在另外奇怪的是，如果我单击“EMPTY FN”按钮，它什么也不做（应用程序组件上的空功能），下一个快照如下所示：

我对这个话题有几个问题：

• GC的详细工作原理是什么？对于我的特殊情况，我认为 GC 无法释放内存，因为仍然存在对该对象的引用。如何找出该引用所在的位置？
• 为什么在第一个组件被移除后不调用 GC，而是在之后调用空函数时调用 GC？
• 我是否必须关心这个“死”对象（假设测试组件订阅了一些可观察对象，但通过异步管道或在 ngOnDestroy 中正确取消订阅它们）？

我的 Angular 9 项目出现问题，其中拖放功能无法始终如一地工作。每当我尝试将对象拖到其目标位置时，拖放永远不会完成。大多数情况下，对象会返回其原始位置，或者在我要将对象移动到的目标位置之前或之后移动到另一个位置。这是我的代码：

<div class="col-sm-12">

          <div cdkDropList class="example-list cdk-drop-list-receiving" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let word of Words; let i = index;">
                <div class="row" *ngIf="((i % 2) == 0)"  style="margin-right: 0px; margin-left: 0px;" >
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i }}</div>
                  <div class="col-sm-5 text-center example-box"  style="border: 1px solid black" cdkDrag ><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{ Words[i].Title }}</div>
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i+1 }}</div>
                  <div class="col-sm-5 text-center example-box" *ngIf="Words[i+1] !== undefined" style="border: …