小编Cri*_*alu的帖子

运行Windows 7专业版32位.

我尝试npm install -g angular-cli在普通或管理员下运行.

我也尝试将它添加到PATH下的Enviorment Variables中(C:\Users\Administrator\AppData\Roaming\npm\node_modules\angular-cli\bin\ng),但也没有成功.

我究竟做错了什么？

VSCode中是否有任何可以隐藏资源管理器的键绑定,就像Ctrl+Shift+E显示它一样？

我讨厌伸手去拿鼠标而且我没有足够的屏幕空间让Explorer始终保持开启状态.

谢谢.

这是路由和组件的样子:

routes.config

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: 'users/new', component: NewUserComponent },    
];

新user.component

 addField(newName: string){
        this.items.push({ 
          name: newName,
      })
      this._router.navigate(['/users'])

Angular2应该刷新 router.navigate上的页面吗？

还有什么可以使用而不是 router.navigate来避免任何页面刷新？

这是证明:

在 React 中构建自定义下拉菜单，并在单击外部尝试关闭它时遇到问题。
所以我创建了通用的 HOC，这样我也可以将它用于其他场合。

我似乎遇到的问题是我不知道如何将其ref从临时传递到组件。

我一直在研究forwardRef和其他语气的示例，但我无法弄清楚。
知道是否可能以及我该怎么做？

Codesandbox 演示

import React, { useState, useRef, useEffect } from "react";

export default function withClickOutside(WrappedComponent) {
  const Component = (props) => {
    const [open, setOpen] = useState(false);

    const ref = useRef();

    useEffect(() => {
      const handleClickOutside = (event) => {
        if (!ref?.current?.contains(event.target)) {
          setOpen(false);
        }
      };
      document.addEventListener("mousedown", handleClickOutside);
    }, [ref]);

    return <WrappedComponent {...props} open={open} setOpen={setOpen} ref={ref}/>;
  };

  return Component;
}

以下是我安装PrimeNG的步骤:

1. npm install primeng --save npm install primeui --save

2. 更新Index.html :(我必须将目录primeng和primeui从node_modules复制到assets文件夹以摆脱404 文件未找到错误)

   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
   <link rel="stylesheet" href="assets/styles.css">
   <link rel="stylesheet" href="assets/primeui/themes/omega/theme.css">
   <link rel="stylesheet" href="assets/primeui/primeui-ng-all.min.css">`
   

   Run Code Online (Sandbox Code Playgroud)

3. 更新test.component.ts:

   import {Calendar} from '../../assets/primeng/primeng';
   ....
   export class TestComponent {
        dateValue:string;
   }
   

   Run Code Online (Sandbox Code Playgroud)

4. 更新test.component.html:

   <p-calendar formControlName="date"></p-calendar>
   

   Run Code Online (Sandbox Code Playgroud)

结果:页面上没有显示任何内容.

我错过了什么吗？

EDIT1:

1. 我现在认为说使用angular-cli安装项目很重要
2. 如果我添加<p-calendar [(ngModel)]="dateValue"></p-calendar>到test.component.html,我得到

   错误:未捕获(在承诺中):无法分配给引用或变量!

EDIT2:

我只是在另一个没有使用angular-cli的项目中尝试过它:

    <link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" />
    ....
    import {Calendar} from 'primeng/primeng'; …

单击"添加"后尝试清除输入框,就像 本教程中的人员一样.
我使用这个简短的代码重新创建了错误,而没有使用API​​.
您还可以查看Plunker.

HTML

<input ng-model="contact.name" type="text">
<button ng-click="Add()">Add</button>

<ul ng-repeat="contact in contactList">
    <li>{{ contact.name }}</li>
</ul>

JS

$scope.contactList = [
    {name: 'cris'}, {name: 'vlad'}
;]

$scope.Add = function() {
    $scope.contactList.push($scope.contact)
    $scope.contact = ""
}

似乎我可以添加1项,但在第二个我得到此错误:

这应该是一个 2 分钟的快速查找，但我正在搜索一个小时并且找不到任何解决方案。

如何将字段中每个单词的首字母大写username？

{
    "_id" : ObjectId("5908288bfbce59540a67fa11"),
    "username" : "JOHN DOE"
},
{
    "_id" : ObjectId("5908288bfbce59540a67fa12"),
    "username" : "jane doe"
}

尝试了这个我不太理解的解决方案，但它不起作用：Fetched 0 record(s) in 0ms

db.getCollection('test').toupper.aggregate(
    [
        {
            $project: {
                username: {
                    $concat: [{
                        $toUpper: { $substr: ["$username", 0, 1] }
                    }, { $substr: ["$username", 1, 3] }]
                }
            }
        }])

期望bindActionCreators为键'ACCOUNT_LOGIN'的函数actionCreator,而是接收类型'string'.

我今天开始bindActionCreators在应用程序中突然得到这个错误.
我甚至去了较旧的GIT历史,我确信我没有这个错误,现在它也在那里.
该应用仍然有效,但每条路线上弹出的错误都会发生变化.

以前有人有这个问题吗？或者任何想法来自哪里？如果吼叫还不够,我可以提供更多代码.

容器:

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import account from '../components/account';
import * as AccountActions from '../actions/account';

function mapStateToProps(state) {
  return {
    username: state.account.username,
    password: state.account.password,
    loggedIn: state.account.loggedIn,
    registred: state.account.registred,
    loading: state.account.loading,
    clientId: state.account.clientId
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(AccountActions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(account);

行动:

export const ACCOUNT_LOGIN = 'ACCOUNT_LOGIN';

export function login(username, password) {
    return {
      type: ACCOUNT_LOGIN,
      username,
      password,
      loggedIn: false,
      loading: …

我正在尝试将jest快照测试引入我的应用程序。

登录表单组件

render() {
    return (
    ...
    <DynamicSnack
        dialogOpen={this.props.dialogOpen}
        snackOpen={this.props.snackOpen}
        snackTimer={this.props.snackTimer}
        snackMessage={this.props.snackMessage}
    />
    )
}

动态Snack组件

import Snackbar from 'material-ui/Snackbar';

render() {
    let { snackOpen, snackTimer, snackMessage } = this.props

    return (
        <Snackbar
            open={snackOpen}
            message={snackMessage}
            autoHideDuration={snackTimer}
            onRequestClose={this.closeSnack}
        />
    )
}

LoginForm.spec.js

import React from 'react'
import renderer from 'react-test-renderer'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import LoginForm from '../../app/components/loginComponents/loginForm'

describe('LoginForm', () => {
    it('should render snapshot', () => {
        const component = renderer.create(
            <MuiThemeProvider>
                <LoginForm />
            </MuiThemeProvider>
        ) …

在 Redux 中间件功能的帮助下，当离开播放页面时，我会显示警告模式。

问题是我现在无法控制导航。在模式显示之前页面已更改。

有什么方法可以阻止路由器导航并根据模式选择做出决定吗？

middleware.push(routeIntrerceptor);

.....

const routeIntrerceptor = ({dispatch, getState}) => next => action => {
  const state = getState();
  const location = state.router.location.pathname;

  if (action.type === '@@router/LOCATION_CHANGE' && location.includes('play')) {
    dispatch({ type: 'SET_DIALOG_TOGGLE' });
  }
  next(action);
};

export default routeIntrerceptor;