标签: components

如标题中所述,我在Visual Studio项目中复制了我的DLL,将其设置为"content"和"始终复制".添加了对此DLL的引用并将其设置为"本地复制".

我成功地通过代码将我的组件实例化为表单,但它没有出现在工具箱中,真的很无聊.

我该如何解决这个问题？

如果我直接将DLL项目链接到这个项目它可以工作,但现在我将DLL视为"外部",因此它不是DLL项目的同一解决方案的一部分.

我在组件内部有这个:

private formBuilder: FormBuilder

...

signupForm: FormGroup;

...

this.signupForm = this.formBuilder.group({
  'name':             [null, Validators.required],
  'account':          this.formBuilder.group({
    'email':          [null, [Validators.required, ...]],
    'confirm_email':  [null, Validators.required],
  }, {validator: ValidationService.emailMatcher}),
  'password':         [null, [Validators.required,...]]
});

我想设置电子邮件字段的值.我试过这个,但没有运气:

this.signupForm.patchValue({'email': 'myvalue@asd.com'});

但是这个值是嵌套的,所以在这种情况下,sintax是什么？我也尝试过:

this.signupForm.patchValue({'account.email': 'myvalue@asd.com'});

也在这里搜索:

https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#patchValue-anchor

谢谢

我正在尝试使用Angular 2中的验证来实现嵌套表单,我已经看到了帖子并且遵循了文档,但我真的很挣扎,希望你能指出我正确的方向.

我想要实现的是拥有一个带有多个子组件的经过验证的表单.这些子组件有点复杂,其中一些有更多的子组件,但为了这个问题,我认为我们可以解决有父母和孩子的问题.

我想要完成什么？

有一个像这样工作的表单:

<div [formGroup]="userForm" novalidate>
    <div>
        <label>User Id</label>
        <input formControlName="userId">
    </div>
    <div>
        <label>Dummy</label>
        <input formControlName="dummyInput">
    </div>
</div>

这需要一个像这样的类:

private userForm: FormGroup;
constructor(private fb: FormBuilder){
    this.createForm();
}
private createForm(): void{
    this.userForm = this.fb.group({
        userId: ["", Validators.required],
        dummyInput: "", Validators.required]
    });
}

这按预期工作,但现在我想要解耦代码,并将"dummyInput"功能放在一个单独的不同组件中.这是我迷路的地方.这就是我的尝试,我想我离答案不远,但我真的没有想法,我对这个场景很新:

parent.component.html

<div [formGroup]="userForm" novalidate>
    <div>
        <label>User Id</label>
        <input formControlName="userId">
    </div>
    <div>
        <dummy></dummy>
    </div>
</div>

parent.component.ts

private createForm(): void{
    this.userForm = this.fb.group({
    userId: ["", Validators.required],
    dummy: this.fb.group({
        dummyInput: ["", Validators.required]
    })
});

children.component.html

<div [formGroup]="dummyGroup">
    <label>Dummy Input: …

我对编程一般还是比较陌生的，甚至对 JS 和 React(Native) 也比较新，但我已经为此工作了一整天，但我仍然没有弄清楚，所以我求助于 Stack Overflow，希望有人可以帮我。

基本上我想要完成的是将 other 设置Components为App组件的子级，因为我希望他们能够访问我将在stateof 中设置的信息App。然而，与此同时，我也使用react-navigation创造底部导航栏，因此我对我如何能通过不知道props的App这些其他的Components，如ExplorePage这是代表其他的成分children components。

应用程序

import React from 'react';
import ExplorePage from './app/tabs/ExplorePage';
import {createBottomTabNavigator} from 'react-navigation';

...other imports

class App extends React.Component {

  state = {
      parentState: 'testing testing',
    }

}

const MainScreenNavigator = createBottomTabNavigator(
  {
    Home: {screen: ExplorePage},
    Search: {screen: SearchPage},
    Favorites: {screen: FavoritesPage},
  }
);


export default MainScreenNavigator;

ExplorePage，就像 …

这里我想将一些标题传递给 mainlayout.razor 页面，以便我的组件或页面可以更新标题的标题。blazor 有没有可能的方法来做到这一点？任何帮助将不胜感激。

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4 bg-success">
            <button onclick="toggleNav()">
                <span class="oi oi-menu"></span>
            </button>
            <div class="text-center">
                hey there
            </div>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
    
</div>

@code
{

}

我的子组件是一个带有 @page 指令的路由器页面，用于在页面之间导航我希望该组件更新此主布局，有什么可能的方法吗？预先感谢您的任何帮助。

问候，

我正在研究XE2中的一些组件.是否可以将更多组件的单元添加到它所放置的表单的uses子句中？

示例:当我从已构建并安装的包中选择TCustomComponent时,CustomComponent将添加到表单的uses子句中.我还想添加单元GlobalConstants.

有谁知道这是否可以做到？

假设我有一个组件包含一个用于行为的JavaScript文件,一个HTML模板文件和一个用于外观的SCSS文件.

我们使用Webpack在应用程序的主JavaScript中加载组件的JavaScript(例如,通过require('./path/to/the-component.js')).我们使用组件的JavaScript加载其SCSS文件(通过require('./the-component.scss')).

组件的SCSS文件包含一个具有默认值的变量(例如,最小高度:) $min-height: 400px.

如果我不喜欢组件的所有用法中的400px:我如何覆盖这样的变量(例如在应用程序的SCSS文件*中)来调整$min-height到500px？当然,由于违反关注点分离原则并不是一个好主意,因此组件不应该对其周围目录的组织方式做出任何假设.

到目前为止,我没有找到解决这个问题的方法.但我确信有人做过.

*)以及如何(在哪里)我应该加载这样的文件(通常,我通过app.js加载app.scss)

如何在reactstrap Dropdown中设置所选项目？

有下拉列表的示例:https://reactstrap.github.io/components/dropdowns/

当我在下拉列表中选择项目时,它不会显示.

*******************工作方案*****************************

import React from "react";
import {ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle} from "reactstrap";
import superagent from "superagent";

class BootstrapSelect extends React.Component {

    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.changeValue = this.changeValue.bind(this);
        this.state = {
            actions: [],
            dropDownValue: 'Select action',
            dropdownOpen: false
        };
    }

    toggle(event) {

        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }

    changeValue(e) {
        this.setState({dropDownValue: e.currentTarget.textContent});
        let id = e.currentTarget.getAttribute("id");
        console.log(id);
    }


    componentDidMount() {
        superagent
            .get('/getActions')
            .type('application/json; charset=utf-8')
            .end(function (err, res) {
                console.log(res.body);
                this.setState({actions: res.body});
            }.bind(this)); …

我正在我的项目中使用Vuetifyjs库.我想向我的组件添加转换 - 但是没有关于如何启动转换的文档.

例如,我想在屏幕上添加一些转换到我的卡的外观.

<v-card transition="v-slide-y-transition">...</v-card>

如何开始转型？

TL; DR:在具有管理其自己的状态有些复杂的逻辑可重用的组件的情况下(认为:与autocompleter Facebook的评论文字区域,表情符号等),一个人如何使用存储,操作和减速器进行管理的多个实例的状态这个组件遍布整个网站？

考虑官方redux回购中的真实示例.在其中我们有:

• 一个RepoPage,它显示谁已经出演一个特别的回购协议的用户列表中,
• 一个UserPage,显示由特定用户加星标的repos列表
• 一个List,它足够通用,可以显示用户列表或repos,提供了方法items和方法renderItem.特别是RepoPage使用User组件来显示为回购加星标的每个用户,并UserPage使用Repo组件来显示每个加星标的回购.

假设我真的希望所有的状态都在Redux中.

特别是,我希望每个RepoPage和UserPage上的每个List的状态都由Redux管理.在这个例子中已经通过一个聪明的三级深树来处理:

• 在顶层,密钥表示它是什么类型的组件数据(在示例中称为store.pagination)
• 然后,每个特定类型的上下文都有一个分支,其中组件可以是(store.pagination.starredByUser,store.pagination. stargazersByRepo)
• 然后有与唯一上下文一样多的键(store.pagination.starredByUser[login],store.pagination. stargazersByRepo[repo])

我觉得这三个级别也对应于:组件类型,父类型,父ID.

但是,我不知道如何扩展这个想法,以处理List组件本身有很多子项的情况,其中一个状态值得在Redux中进行跟踪.

特别是,我想知道如何实现一个解决方案,其中:

• User 组件保持完整
• Repo 组件有一个切换其背景颜色的按钮
• 每个Repo组件的状态由Redux管理

(我很高兴使用Redux的一些扩展,它仍然使用Reducer,但是不想使用"只是将它保持在React本地状态",为此问题的目的)

我的研究到目前为止:

• 它看起来像在榆树​​上的操作(消息)是可嵌套以这样的方式代数数据类型,即父组件可以解压缩的消息的"外信封"和到子减速器传递旨在用于儿童一个内动作(更新).
• 因为它是终极版公约使用字符串作为动作类型,上述想法的自然转换为使用前缀,而这似乎正是棱镜(foremly称为终极版-榆树)的作用:action.type是由通过组件树告诉路径的子串.OTOH在这篇评论中,棱镜作者tomkis解释说,Redux缺少的Elm Architecture最重要的部分是动作的组合
• 上述两种方法似乎是重用Reducer Logic中描述的方法的扩展版本
• 我还没有完全理解redux-fly如何在内部工作,但它似乎使用有效负载,而不是action.type通过其安装路径识别组件实例,store其中也对应于组件树中的路径,因为它的方式是由组件手动构建 …