小编hof*_*eyn的帖子

亲爱的 Stackoverflow 社区。

我是 NgRx 的新手，并试图找出它是如何工作的。我创建了一个应用程序 - 基于 Angular 6、Firebase 和 NgRx 的简单商店列表。

我在名为的集合中添加了几个项目，Product并尝试通过 ngrx 模式获取它们。似乎我做得很好 - 我已经获取了项目作为有效载荷，GET_PRODUCTS_SUCCESS但我无法将它们放入视图中进行显示，产品未定义。我尝试通过两种方式进行：

this.store.select(getProducts).subscribe(products => {
  console.log('products', products); // undefined
});

和

 this.products = this.store.select(getProducts); // Store

在第二种方式中，我只是得到了一个完整的商店......下面的代码。

product.actions.ts

import { Action } from '@ngrx/store';
import { Product } from '../../models/product.model';

export const GET_PRODUCTS = 'Get_products';
export const GET_PRODUCTS_SUCCESS = 'Get_products_success';

export class GetProducts implements Action {
  readonly type = GET_PRODUCTS;
  constructor(public payload = '') {}
}

export class GetProductsSuccess implements …

我需要制作一个简单的确认窗口，我看到了很多关于如何使用额外操作来完成的示例（例如等到表单的文件上传不是字段）。但是我只需要创建一个带有默认文本的默认确认窗口（如下图所示），以便在用户想要离开当前页面时显示它。而且我无法完全理解我应该在处理before unload事件中证明什么逻辑。

如果它重复了一些问题，我最近很抱歉，但是，我没有找到任何解决方案。所以我有：

例子.guard.ts

export interface CanComponentDeactivate {
    canDeactivate: () => Observable<boolean> | boolean;
}

@Injectable()
export class ExampleGuard implements CanDeactivate<CanComponentDeactivate> {

    constructor() { }

    canDeactivate(component: CanComponentDeactivate): boolean | Observable<boolean> {
        return component.canDeactivate() ?
            true :
            confirm('message'); // <<< does confirm window should appear from here?
    }
}

示例.component.ts

export class ExampleComponent implements CanComponentDeactivate {

    counstructor() { }

    @HostListener('window:beforeunload', ['$event'])
        canDeactivate($event: any): Observable<boolean> | boolean {
            if (!this.canDeactivate($event)) {
                // what should I do here?
            }
        }
} …

我有带表单的 Angular 6 应用程序。这是一个例子

export class ExampleComponent implements OnInit {
    form: FormGroup;

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.form = new FormGroup({
            first: new FormControl(),
            last: new FormControl()
        });

        this.markControlsAsDirty(this.form);
    }

    markControlsAsDirty(form: FormGroup) {
        this.form.get('first').markAsDirty();
        this.form.get('last').markAsDirty();
    }
}

我不想获得单个控件并标记每个字段。我可以将表单组中的所有控件标记为脏吗？

更新我已经添加了stackblitz 示例来表明之前的两个答案是错误的

ngrx，角 7

我需要从列表中删除项目，但在我应该显示一个对话框进行确认之前。我认为对我来说最好的方法是通过side-effect显示对话框。我需要在调度删除操作时出现，在打开对话框组件的副作用中捕获它并返回某种承诺（确认或取消）。这样做我有点困惑，所以我需要你的帮助，亲爱的 Stackoverflow。

列表.component.ts

export class ListComponent {

    list: List;

    constructor(store: Store<fromStore.State>) { }

    deleteItem(itemId: string) {
        this.store.dispatch(new fromStore.DeleteItem);
    }
}

确认-dialog.component.ts

export class ConfirmDialogComponent {

    constructor() { }

    confirm() {
        // return something to confirm deleting
    }

    cancel() {
        // return something to cancel deleting
    }
}

list.actions.ts

export enum ListActionTypes {
    DeleteItem = '[List] Delete Item',
    DeleteItemSuccess = '[List] Delete Item Success',
    DeleteItemFailure = '[List] Delete Item Failure',

    SetDialogVisibility = '[List] Set Dialog Visibility'
} …

如果我重复了这个问题，我很抱歉，但我没有找到任何解决我的问题的方法。

React 中检测浏览器中切换标签或隐藏浏览器窗口的最佳方法是什么？

我知道有一个页面可见性 API，但我如何在 React 组件中实现它？

这是最简单的方法，但我不知道是否正确

import React, { Component } from 'react';

class Sample extends Component {
  handleBlur = () => {
    console.log('Blur');
  }

  handleFocus = () => {
    console.log('Focus');
  }

  render() {
    return (
      <div
        style={{ width: 400, height: 200 }}
        onBlur={this.handleBlur}
        onFocus={this.handleFocus}
      >
      test
      </div>
    );
  }
}

export default Sample;

我已经更新了我的webpack文件。现在，不会将我的自定义样式应用于主样式包。没有错误，捆绑中缺少自定义样式的类。当我运行带有development模式的构建时，一切正常，并且样式存在于捆绑包中。这种情况仅在productionbuild中发生。

我extract-text-webpack-plugin改为尝试，mini-css-extract-plugin但结果是相同的-在产品构建中，我的样式丢失了。

我将非常感谢任何帮助。

这是文件：

webpack.config.js

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const lessToJs = require('less-vars-to-js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const publicPath = 'public';
const themeVariables = lessToJs(
  fs.readFileSync(path.join(__dirname, './assets/style/ant-theme-vars.less'), 'utf8'),
);

module.exports = (env, options) => {
  const mode = env ? env.mode : options.mode;
  return {
    entry: './assets/app.jsx',
    output: {
      path: path.resolve(__dirname, publicPath), …

如果缺少任何字段,如何对数组进行排序？

所以现有的数组例如是:

const users = [
    {
        id: 1, firstname: 'Jerry'
    }, {
        id: 2, firstname: 'Thomas', lastname: 'Geib'
    }, {
        id: 3
    }, {
        id: 4, lastname: 'Berg'
    }, {
        id: 5, firstname: 'Ass', lastname: 'Noob'
    }, {
        id: 6, lastname: 'Jopa'
    }
]

并且结果应按此顺序排序:

1. 用firstname和的对象lastname
2. 仅用firstname或的对象lastname
3. 没有firstname和的对象lastname

所以它看起来像:

    const users = [
        {
            id: 2, firstname: 'Thomas', lastname: 'Geib'
        }, {
            id: 5, firstname: 'Ass', lastname: 'Noob'
        }, { …