小编Ees*_*esa的帖子

我有一个查询文件,如下所示:

import {gql} from 'react-apollo';

const queries = {
  getApps: gql`
    {
      apps {
        id
        name
      }
    }
  `,
  getSubjects: gql`
    {
      subjects {
        id
        name
      }
    }
  `
};

export default queries;

然后我将此文件导入到我的React组件:

import React, {Component} from 'react'
import queries from './queries'

class Test extends Component {
...
}

export default graphql(queries.getSubjects)(graphql(queries.getApps)(Test));

这将只获取其中一个查询(getApps)的数据,而不是两者.如果我一次做一个这样看起来像这样:

export default graphql(queries.getSubjects)(Test);

然后它工作,但我没有我的其他查询.是的,我已经单独测试了它们并且它们有效.如何获取它以便两个查询都显示在我的props.data中？

我从这里了解到:

componentDidCatch:

• 总是在浏览器中调用
• 在DOM已经更新的"提交阶段"期间调用
• 应该用于错误报告之类的东西

getDerivedStateFromError:

• 在服务器端呈现期间也会调用
• 当DOM尚未更新时,在"提交阶段"之前调用
• 应该用于渲染回退UI

不过,我对某些事情感到有些困惑:

1. 他们都捕捉到同样类型的错误吗？或者每个生命周期都会遇到不同的错误？
2. 我应该总是使用两者(可能在同一个"错误捕捉"组件中)吗？
3. "使用componentDidCatch进行错误恢复并不是最佳选择,因为它会强制后备UI始终同步呈现"这有什么问题？

是否可以指定GraphQL中的字段应该是黑盒子,类似于Flow具有"任何"类型的方式？我的架构中有一个字段应该能够接受任意值,可以是String,Boolean,Object,Array等.

我正在构建一个Angular2客户端应用程序.我目前正在研究成员资格组件,并将客户端组件与MVC6 vNext Identity v3集成.我编写了自定义Angular2密码验证器,如下所示:

needsCapitalLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[A-Z]/))
        return {'needsCapitalLetter': true}

    return null;
}

needsLowerLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[a-z]/))
        return {'needsLowerLetter': true}

    return null;            
}

needsNumber(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/\d/))
        return {'needsNumber': true}

    return null;            
}

needsSpecialCharacter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[^a-zA-Z\d]/))
        return {'needsSpecialCharacter': true}

    return null;            
}

这项工作很棒,而且我很喜欢Angular2,但现在我正在尝试编写一个验证器来验证"确认密码"是否等于"密码".为了做到这一点,我需要能够相对于另一个验证一个字段.我可以在组件级别轻松完成此操作,只需检查模糊,提交或其他任何方式,但这会绕过Angular2 ngForm验证系统.我非常想弄清楚如何为一个可以检查另一个字段的值的字段编写一个Angular2 Validator,方法是传入另一个字段的名称或者接近它的东西.看起来这应该是一种能力,因为这在几乎任何复杂的业务应用程序UI中都是必需的.

在双向数据绑定中,如果用户决定取消当前编辑,该怎么办？如何在角度2中实现这一目标？

考虑以下代码:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `Name: {{ name  }}<br>
    <input *ngIf='editMode' type="text" [(ngModel)]='name' /><br>
    <button *ngIf='!editMode' (click)='editMode = !editMode' >Edit</button>
    <button *ngIf='editMode' (click)='editMode = !editMode' >Save</button><br>
    <button *ngIf='editMode' (click)='editMode = !editMode' >Cancel</button>`
})
export class AppComponent {
  public name = 'Essa';
  public editMode false;
}

我希望在用户按下取消按钮时恢复旧值.

这里以plunker为例.

我有一组用户,我想只在桌面上显示男性用户.以下是我试图实现这一目标的方法:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'app',
    template:`
    <table>
        <tbody>
            <tr *ngFor="#user of users" *ngIf="user.gender == 'male' " >
                <td>{{user.name}}</td>
                <td>{{user.gender}}</td>
            </tr>
        </tbody>
    </table>
    `
})
export class AppCmp{
    public users = [
        {
            name: "Eesa",
            gender: "male"
        },
        {
            name: "Abdullah",
            gender: "male"
        },
        {
            name: "Javeria",
            gender: "female"
        }
    ]
}

bootstrap(AppCmp);

但我收到以下错误:

EXCEPTION:TypeError:无法读取未定义的属性"gender"

正如你所看到我在同一个元素上使用*ngFor和*ngIf即tr.为什么我不能在同一个元素上使用*ngFor和*ngIf？有没有其他方法来实现这一目标？我在plunker上重新产生了这个问题,你可以在控制台上看到错误.

我DynamicComponentLoader用来加载子组件,它产生以下html:

<child-component> Child content here </child-component>

这是我如何在父级中加载组件

ngAfterViewInit(){
        this._loader.loadIntoLocation(ChildComponent,this._elementRef,'child');
  }

如何将id属性添加到子组件,以便它生成以下html:

<child-component id="someId" > Child content here </child-component>

我试图将一个简单的字符串对象从父组件传递给子子组件.我尝试过以下方式:

parent.ts

import {Component} from 'angular2/core';
import {Router,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,RouteConfig} from 'angular2/router';
import {ChildCmp} from "./child";
import {bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'app',
    template:`
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
export class ParentCmp{
    public data = "Some data from parent.";
    constructor (private _router:Router){
        var config = [];
        if(!this._router.registry.hasRoute("Child",ParentCmp))
            config.push({path: "/child/...",component:ChildCmp,name: 'Child',useAsDefault:true, data: {"data": this.data}});

        this._router.config(config);
    }
}

bootstrap(ParentCmp,[
    ROUTER_PROVIDERS
]);

child.ts

import {Component} from 'angular2/core';
import {RouteData,Router,ROUTER_DIRECTIVES,RouteConfig} from 'angular2/router';
import {SubChildCmp} from "./sub_child";

@Component({
    selector: 'child',
    template: `<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([

]) …

使用MockedProvider我们可以模拟非常直接的输出，例如

let mocks = [{
    request: { query: DATA_QUERY, variables: {...} }
    result: {
        data: {...},
        refetch: () => console.log('refetch mocked') 
    }
}]
<MockedProvider mocks={mocks} addTypename={false}>
    <ComponentToTest />
</MockedProvider>

这在执行时给了我成功的模拟输出DATA_QUERY

<Query query={DATA_QUERY} variables={...} fetchPolicy='cache-and-network' >
      {({data, refetch}) => refetch()
</Query>

哪个应该登录refetch mocked控制台，但在我的情况下没有发生。可能这不是模拟该refetch函数的正确方法，不是吗？如果没有，有什么方法可以refetch使用以下方法来模拟该函数MockedProvider

感谢期待

我有 3 个不同的组件使用相同的 graphql 查询。这个例子将是GET_USERS查询。当在消息传递相应选项卡中查找用户发送消息以及邀请用户执行操作并在创建帖子时标记他们时，会使用此功能。

我遇到并试图弄清楚如何处理的问题是，并不总是一次只渲染一个的情况。用户可以单击消息选项卡，然后在帖子选项卡中标记用户。 问题：当他返回消息选项卡时，它现在已重新呈现从标记调用的查询的状态。

有关如何使用 Apollo 设置状态以及一般查询以避免此问题的任何建议。归根结底，我的后端是resolve特定操作的一个“路线”或功能。

编辑 了解更多信息。我知道解决这个问题的方法是使用 axios 请求到 graphql 端点，并将响应存储在useState该组件的本地。如果我对应用程序中使用信息的每个不同位置执行此操作，它们将保持解耦并且不会共享完全相同的状态。

但需要明确的是，如果可能的话，我正在尝试使用阿波罗来解决这个问题。