小编Uma*_*raz的帖子

最近,我开始玩角度2.到目前为止它真棒.所以,为了学习使用,我已经开始了一个演示个人项目angular-cli.

通过基本的路由设置,我现在想要从头部导航到一些路由,但由于我的头部是父的router-outlet,我收到此错误.

app.component.html

<app-header></app-header> // Trying to navigate from this component
    <router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html

  <a [routerLink]="['/signin']">Sign in</a>

现在我部分理解我猜,因为该组件是一个包装器,router-outlet所以不可能通过这种方式访问router.那么,是否有可能从外部访问导航这样的场景？

如果需要,我会很乐意添加更多信息.先感谢您.

更新

1-我package.json已经有了稳定的@angular/router 3.3.1版本.2-在我的主app模块中,我已经导入了routing-module.请看下面.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from …

我正在使用Enzyme单元测试我的React组件.据我所知,为了测试原始的未连接组件,我必须将其导出并测试它(我已经完成了).我已经设法为连接的组件编写了一个测试,但我真的不确定这是否正确,以及我想要测试连接组件的确切内容.

Container.jsx

import {connect} from 'react-redux';
import Login from './Login.jsx';
import * as loginActions from './login.actions';

const mapStateToProps = state => ({
  auth: state.auth
});
const mapDispatchToProps = dispatch => ({
  loginUser: credentials => dispatch(loginActions.loginUser(credentials))

});
export default connect(mapStateToProps, mapDispatchToProps)(Login);

Container.test.js

import React from 'react';
import {Provider} from 'react-redux';
import {mount, shallow} from 'enzyme';
import {expect} from 'chai';
import LoginContainer from '../../src/login/login.container';
import Login from '../../src/login/Login';


describe('Container Login', () => {
  it('should render the container component', () => …

这是我第一次socket.io在生产中使用.我正在使用React+ Redux.我最近socket.io与redux 集成并且工作正常,但我不确定它是否是我做的最好的方法.因为我没有找到任何正确的socket.io实现与redux,我需要一些帮助/建议,如果我可以改进它.

所以,对于初学者,我已经设置了一个服务来管理整个应用程序的套接字:

Socket.js

import isEmpty from 'lodash/isEmpty';
import io from 'socket.io-client';
import storage from '../storage';

/* eslint-disable no-use-before-define */

const Socket = {
  connect,
  emit,
  on,
  removeListener,
  socket: null
};

/* eslint-enable no-use-before-define */

function connect() {
  const hasAuthenticated = !isEmpty(storage.get('user'));
  if (hasAuthenticated) {
    // Setup a server for testing.
    Socket.socket = io.connect('http://localhost:3000', { reconnect: true });
  }
}

connect();

function on(eventName, callback) {
  if (Socket.socket) {
    Socket.socket.on(eventName, data => { …

我有这个组件通过其选择器接收两个输入,但这可以扩展到任意数量的输入和任何组件.因此,在组件本身消耗多个属性的过程中,单个@Input()装饰器不允许我使用多个属性,因此作为一种解决方法,我使用了两个装饰器用于两个输入属性,但我不认为这是解决的唯一方法这样的场景.

export class AsyncComponent {
     @Input() waitFor: boolean;
     @Input() message: string; // TODO: Verify if multiple inputs are needed for multiple props
 }

更新

<app-async [waitFor]="true" message="foo"><app-async>

那么,是否有可能用任何其他方式只使用一个装饰器来获取任意数量的输入道具？如果有更多的道具,我路过除了waitFor和message我会做的每个支撑以下.

 @Input() waitFor: boolean;
 @Input() message: string;
 @Input() someOtherProp: string;
 ....

或者有没有其他方法只有一个Input装饰器并消耗任何数量的属性？

我Enzyme用来测试我的反应和还原部分.我已经阅读并发现为组件编写集成测试也是一种很好的做法.所以,这很简单,因为我必须调用动作创建者并检查他们对存储的更新值,但我有一些异步操作返回dispatch动作.

login.actions.js

export function loginUser(credentials) {
  return dispatch => {
    dispatch(action.loginRequest());
    return axios({
      method: 'post',
      url: `${api}/login`,
      data: {
        email: _.trim(_.get(credentials, 'email')),
        password: _.get(credentials, 'password')
      }
    })
      .then(response => {
        const { data } = response;

        if (_.isEqual(_.get(response, 'status'), 200)) {
          dispatch(action.loginSuccess(data));
        }
      })
      .catch(err => {
        dispatch(action.loginError(err));
      });
  };
} 

login.actionCreators.js

export function loginRequest() {
  return {
    type: types.LOGIN_REQUEST
  };
}
export function loginSuccess(payload) {
  return {
    type: types.LOGIN_SUCCESS,
    payload
  };
}
export function loginError(payload) …

我axios用于react redux应用程序中的 api 调用。我添加了这个拦截器来拦截所有 api 调用的响应，并在状态码为 401 时重定向用户登录。

axios.interceptors.response.use((response) => {
  if (response.status === 401) {
    browserHistory.push('/login');
  }
  return response;
});

我正在对此进行单元测试并断言browserHistoryspy 被调用，但我不确定为什么我的测试一直失败。经过大量尝试后，我有点卡住了，无法解决问题。我moxios用于嘲笑响应。

测试

let sandbox;

  beforeEach(() => {
    moxios.install();
    sandbox = sinon.sandbox.create();
  });

  afterEach(() => {
    moxios.uninstall();
    sandbox.restore();
  });

  describe('interceptors', () => {
    it('should redirect to login if response status code is 401', (done) => {
      moxios.withMock(() => {
        sandbox.spy(browserHistory, 'push');

        axios.get('/test');

        moxios.wait(() => {
          const request = moxios.requests.mostRecent();
          request.respondWith({
            status: …

我对酶很新.我有两个正在测试的组件.

form.jsx

const LoginForm = ({ style, handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
        <Button type='submit'>
          Login
        </Button>
    </form>
  );
};

LoginForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired
};

我在另一个组件中使用此组件如下:

Component.jsx

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.onLogin = this.onLogin.bind(this);
  }

  onLogin(event) {
    event.preventDefault();
    this.props.loginUser();
  }
  render() {
    return (
      <LoginForm style={loginFormStyles} handleSubmit={this.onLogin} />      
    );
  }
}

Login.propTypes = {
  auth: PropTypes.object.isRequired, //mapStateToProps
  loginUser: PropTypes.func.isRequired //mapDispatchToProps
};

我已经写了测试form,他们正在通过.

外形test.js

 it('should have a onSubmit handler', () …

我正在尝试localStorage使用sinon 进行测试.基本上我对单元测试很新,所以这可能是非常基础的.

更新

我设法提出这个,但现在它给了我一个新的错误 Should wrap property of object

测试

describe('Initial State', () => {
    it('should set the initial state for the component', () => {
const props = {
        currentUser: {}
      };
      sinon.stub(window.localStorage, 'setItem');
      window.localStorage.setItem('none', 'nothing');
    });
  });

我最近开始玩角度2,到目前为止我的经验很棒.我有一些很好的经验ng1,并React为好.所以,这更像是一个普遍的问题,也是一个混乱.我很确定这会帮助很多其他人以及我没有真正找到任何直接答案.

所以,假设我已经module protected.module.ts注册了一些组件.因此,为了使用原始指令,ngFor, ngIf我必须导入CommonModule到特定模块,但是我必须将其导入主入口模块,即app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule  } from '@angular/common';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProtectedModule …