标签: components

我有一个数据驱动的Angular应用程序.我有一个切换组件,我传递切换状态.我的问题是双向数据绑定似乎不起作用,除非我将toggle布尔值作为对象传递.有没有办法让它在不使用EventEmitter或将变量作为对象传递的情况下工作.这是一个可重用的组件,应用程序是大量数据驱动的,因此将值作为对象传递给非选项.我的代码是......

toggle.html

<input type="checkbox" [(ngModel)]="toggled" [id]="toggleId" name="check"/>

toggle.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'toggle-switch',
  templateUrl: 'toggle-switch.component.html',
  styleUrls: ['toggle-switch.component.css']
})

export class ToggleSwitchComponent {

  @Input() toggleId: string;
  @Input() toggled: boolean;

}

parent.component.html

<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch>

我正在开展Angular项目.我正在努力应对组件中的刷新操作.

我想在按钮点击时刷新路由器的组件.当我点击它时,我有刷新按钮需要刷新组件/路由器.

我试过window.location.reload(),location.reload()这两个不适合我的需要.如果有人知道,请帮忙.

我已经创建了一个HOC在我反应过来的应用程序下面的这个，其工作的罚款。但是我想知道是否有办法将 HOC 创建为功能组件（有或没有状态）？？？因为给定的示例是基于类的组件。

试图通过网络找到相同的内容，但什么也找不到。不确定这是否可能？或者永远做正确的事情？

任何线索将不胜感激:)

它是一个Firemonkey组件,但是我可以看到VCL和FMX的大部分组件基础是相同的,所以如果你知道如何在VCL中分享你的知识,那么它最终可能是我案例的解决方案.

我使用TPopup作为祖先.它对我来说很方便,因为它保留在表单/框架上,我可以使用父进程的相同上下文/结构与LiveBindings连接,这对我来说非常方便.

我需要它的行为恰好是TPopup,作为一个容器.但我需要它看起来更好,并有我的特定按钮(我已经为我的软件内部创建了一些属性和自动化)

问题是我创建了一些内部控件,比如TLayouts,Tpanels和Tbuttons,看起来像这样:(空)

其中的黑色区域是我想放弃像TEdit和其他人一样的控件.

我已将所有内部创建的控件设置为Store = false,因此它不会存储在流式系统上.当我放弃一个TEdit时这样做,我得到的是这个(Tedit with aligned = top我需要这个):

但是我期待这个:

如果我更改Store = true,我可以获得正确的效果,但所有内部控件都在Structure面板上公开,每次保存表单并重新打开时,所有内容都会重复.暴露的内部组件对我来说不是问题,但重复的是,如果我关闭并打开组件10次,我会将整个内部结构复制10次.

我将尝试显示一些与组件设计相关的代码:

舱位声明:

  [ComponentPlatformsAttribute(pidWin32 or pidWin64 or pidOSX32 or pidiOSSimulator or pidiOSDevice or pidAndroid)]
  TNaharFMXPopup = class(TPopup, INaharControlAdapter, INaharControl)
  private
  protected
    FpnlMain       : TPanel;
    FlytToolBar    : TLayout;
    FbtnClose      : TButton;
    FbtnSave       : TButton;
    FbtnEdit       : TButton;
    FpnlClientArea : TPanel;
    FlblTitle      : TLabel;
    procedure   Loaded; override;
    procedure   Notification(AComponent: TComponent; Operation: TOperation); override;

constructor Create:

    constructor TNaharFMXPopup.Create(AOwner: TComponent);
    begin
      inherited;

      FpnlMain         := TPanel.Create(Self);
      FlblTitle        := TLabel.Create(Self);
      FlytToolBar …

为什么不将它用作Javascript的通用组件模式,包括浏览器执行的Javascript？

一目了然,这似乎是模块化我正在进行的项目的好方法,它包含一个大型的Javascript代码库,包含许多组件,其中一些与彼此交互.

我想如果输入'Contract type'为空,则按钮'Save'不可点击

保存按钮:

<div class="col-md-4">
        <cic-textbox [control]="formGroup.get('contractType')"></cic-textbox>
      </div>

所有按钮:

 <div class="cic-header-actions pull-left" *ngIf="actions && actions.length > 
 0">
      <button class="btn btn-{{action.style}} m-l-xs" *ngFor="let action of actions" ng-disabled="!contractTypeValid" (click)="execute(action)">
          <cic-icon [icon]="action.icon"></cic-icon>
          {{action.text }}
        </button>
    </div>

定义合同类型:

 let contractType: DataDictionaryPropertyExtended = {
            Binding: 'VART:BEZEICHNUNG',
            Label: 'Vertragsart',
            LabelCols: 4,
            ContentCols: 8,
            IsDisabled: this.isDisabled,
            ValidationProperties: [
                <ValidationProperty>{
                    Type: ValidationType.IsNotEmpty,
                    ErrorMessage: 'Vertragsart darf nicht leer sein.',
                }
            ]
        };

按钮保存绿色:

我有一个名为search_detail的组件,其中包含另一个名为calendar的组件,

SearchDetail_component.html

 <li class="date">
   <div class="btn-group dropdown" [class.open]="DatedropdownOpened">
   <button type="button" (click)="DatedropdownOpened = !DatedropdownOpened"   class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" [attr.aria-expanded]="dropdownOpened ? 'true': 'false'">
      Date <span class="caret"></span>
  </button>
  <ul class="dropdown-menu default-dropdown">
     <calendar  ></calendar>
     <button > Cancel </button>
     <button (click)="setDate(category)"> Ok </button>
   </ul>                            
 </div>
</li>

SearchDetail_component.ts

import 'rxjs/add/observable/fromEvent';
@Component({
    selector: 'searchDetail',
    templateUrl: './search_detail.component.html',
    moduleId: module.id

})

Calendar.component.ts

import { Component, Input} from '@angular/core'; 
@Component({
    moduleId:module.id,
    selector: 'calendar',
    templateUrl: './calendar.component.html'
})

    export class CalendarComponent{
      public fromDate:Date = new Date();    
      private toDate:Date = new Date(); …

我正在写一个Angular 1.5指令,我遇到了一个令人讨厌的问题,试图在绑定数据存在之前对其进行操作.

这是我的代码:

app.component('formSelector', {
  bindings: {
    forms: '='
  },
  controller: function(FormSvc) {

    var ctrl = this
    this.favorites = []

    FormSvc.GetFavorites()
    .then(function(results) {
    ctrl.favorites = results
    for (var i = 0; i < ctrl.favorites.length; i++) {
      for (var j = 0; j < ctrl.forms.length; j++) {
          if (ctrl.favorites[i].id == ctrl.newForms[j].id) ctrl.forms[j].favorite = true
      }
     }
    })
}
...

正如您所看到的,我正在进行AJAX调用以获取收藏夹,然后根据我的绑定表单列表进行检查.

问题是,即使在填充绑定之前,承诺仍在实现......所以当我运行循环时,ctrl.forms仍未定义!

不使用$ scope.$ watch(这是1.5组件的吸引力的一部分)我如何等待绑定完成？

我试图弄清楚如何通知另一个组件有关状态更改.假设我有3个组件 - App.jsx,Header.jsx和SidebarPush.jsx,我只是想做的就是用onClick切换一个类.

因此,单击时Header.jsx文件将有2个按钮将状态切换为true或false.其他2个组件App.jsx和Header.jsx将需要了解这些状态更改,以便只要这些状态发生更改,它们就可以切换类.

App.jsx

import React from 'react';
import Header from 'Header';
import classNames from "classnames";
import SidebarPush from 'SidebarPush';
import PageWrapper from 'PageWrapper';

var MainWrapper = React.createClass({
    render: function() {
        return (
            <div className={classNames({ 'wrapper': false, 'SidebarPush-collapsed': !this.state.sidbarPushCollapsed })}>
                <Header/>
                <SidebarPush/>
                <PageWrapper>
                {this.props.children}
                </PageWrapper>
            </div>
        );
    }
});

module.exports = MainWrapper;

Header.jsx

import React from 'react';
import ReactDom from 'react-dom';


class Header extends React.Component {
    constructor() {
        super();
        this.state = {
            sidbarPushCollapsed: false,
            profileCollapsed: false
        };
        this.handleClick = …

所以我用模板创建了一个简单的包装器组件:

<wrapper>
   <b-table v-bind="$attrs" v-on="$listeners"></b-table>
</wrapper>

使用$attrs和$listeners传递道具和事件.
工作正常,但包装器如何代理<b-table>命名的插槽给孩子？