小编Par*_*ain的帖子

我Material-ui在ReactJs项目中使用组件,由于某种原因,我需要在某些组件中进行自定义,以使其根据屏幕宽度进行响应.

我添加media query并将其作为样式属性传递给组件但不工作,任何想法？

我正在使用这样的代码

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}

<Drawer
  .....
  containerStyle = {drawerStyle}
 >
 </Drawer>

代码仅适用于网络,在移动设备上没有任何影响.甚至css代码没有申请我已经检查了dev.安慰.我正在使用material-ui版本0.18.7.

任何帮助,将不胜感激.

PS:根据要求,我需要根据屏幕大小使用CSS进行一些更改.

我正在开发angular2 web应用程序,我需要以下帮助.我的页面由多个组件组成.我想在用户点击按钮时滚动页面顶部.我试过 document.body.scrollTop = 0;但这不适用于Chrome.我试过document.documentElement.scrollTop = 0; window.scrollTo(0,0); 但没有工作

致力于angular2 beta Forms.经过大量的搜索后发现没什么用处.希望这里有人帮助我.

基本上我有点困惑如何以适当的方式使用angular2中的表单(即使用ngControl,ngFormControl等).我在这里创建了一个plnkr

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

这是我的.html代码: -

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">

  <div class="col-md-7">
Name: <input type="text" id="name" placeholder="Name" class="form-control" ngControl="name">
  </div>
  <div class="col-md-7">
  Password:   <input type="text" id="password" placeholder="password" class="form-control" ngControl="password">
  </div>

  <div class="col-md-7">
    <input type="radio" name='type'>Btech
    <input type="radio" name='type'>Mtech
  </div>

  <div class="col-md-7">
    <input type="checkbox" >Math
    <input type="checkbox">English
    <input type="checkbox">Science
  </div>
  <br>
  <div class="col-md-7">
    <select #selectOption (change)='getValue(selectOption.value)' class='form-control'>
      <option value='1'>One Value</option>
      <option value='2'>two Value</option>
      <option value='3'>Three Value</option>
    </select>
  </div>
</form>
<button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"> Create </button>

和.ts代码在这里: …

我从angular2开始并遇到了两种不同的语法,但我不确定它们的区别 - 或者说它们是如何工作的.

我看到了这个:

 <select class="form-control" required
      [(ngModel)]="model.power"
        ngControl="power" #power="ngForm" >
      <option *ngFor="let p of powers" [value]="p">{{p}}</option>
    </select>

但这也有效

<div *ngFor="#game of games" (click)="gotoGame(game)" class="col-1-4">
        <span>{{game.id}}</span>{{game.name}}
        <br> {{game.description}}
        <br> {{game.genre.name}}
  </div>

是一个只是另一个的别名？一个优于另一个的优点是什么？

我有一个组件有一个html和.ts文件.出于某些原因,我必须创建多个页面(HTML)页面.
是否可以为单个类(组件)创建多个(html)页面？
或者是否可以为组件提供动态TemplateUrl？

我的主要动机是提供不同的URL并使用不同的视图(HTML页面)但使用单个类(.ts类即组件)？
我已经看到下面提到的很多问题,但没有找到确切的解决方案 -

• Angular 2中的动态模板URL
• 如何为Angular2 Component提供动态templateUrl？

我想要这样的东西

{ path: '/Login', component: LogIn, name: "Login"},
{ path: '/Login2', component: LogIn, name: "Login" },
{ path: '/Login3', component: LogIn, name: "Login" }

我想用不同的URL和视图加载相同的组件.

我正在尝试<ng-content>使用内联css 进行样式,但似乎样式不适用于ng-content,我还需要为样式做些其他事情？

<ng-content class="red"></ng-content> <p class="red">hello</p>

这里的班级红色工作,p但不是

Working Example

我有一些复选框,它们的值在数据库中是'Y'或'N'作为枚举.为了进行更新我必须检查所有复选框.如何查看复选框已选中.这是复选框的代码

<label class="radio-inline">
  <input type="checkbox"  ng-model="newItem.have_voter_id"  value="have_voter_id" /><?php echo $this->lang->line('label_voter_id'); ?>
</label>
<label class="radio-inline">
  <input type="checkbox"   ng-model="newItem.have_passport" value="passport" /> <?php echo $this->lang->line('label_passport'); ?>
 </label>

这是查看和更新​​的功能

 $scope.edit = function(id,family_id) {

    $scope.action = 'update';
    FamilyMem.get({id:id,family_id:family_id}, function (response) { // success            
        $scope.newItem = response.data; // store result to variable            
          $("#myModal").modal('show');
        }, function (error) { // ajax loading error
            Data.errorMsg(); // display error notification
            //$scope.edit = false;
        });
  };

并编辑按钮

  <a href="" class="btn btn-magenta btn-sm" ng-click="edit(family_member.id,family_member.family_id)">

尝试使用RouteParams来获取查询字符串参数,但我只是得到了错误

无法解析'RouteParams'(？)的所有参数.确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且'RouteParams'使用Injectable进行修饰.angular2-polyfills.js:332错误:无法读取未定义的属性'getOptional'.......

看看这个Plnkr.如何在不收到此警告的情况下使用RouteParams？

重要文件是:

boot.ts:

import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, RouteParams} from 'angular2/router';
import {AppComponent} from './app/app.component';

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);

并且app.component.ts:

import {Component, OnInit} from 'angular2/core';
import {RouteParams} from "angular2/router";

@Component({
  selector: 'app',
  template: `
    <p *ngIf="guid">guid gived is: {{guid}}</p>
    <p *ngIf="!guid">No guid given in query-string in URL</p>
  `
})
export class AppComponent implements OnInit {
  guid:string;

  constructor(private _params: RouteParams) {} //

  ngOnInit() {
    this.guid = this._params.get('guid');
  }

}

更新:

我没有任何路由,我只有默认的根路由(如果我没有其他路由,那么可以称之为路由......).但正如Gianluca建议的那样,我添加了以下路由配置:

@RouteConfig([
  { path: …

所以我正在开发一个Angular2应用程序.我有一张表,其中每条记录代表一名学生,并包含一个复选框

<input class="mycheckbox" type="checkbox" [value]='student.StudentId'>

在某些时候,用户将点击一个需要获取所有选中复选框值的按钮.

我不确定应该由谁来解决这个问题.

一个想法是每个学生都有一个或不是被检查的值.这必须通过双向绑定来完成.

然而,这意味着每次你必须通过所有学生

这是最好的选择吗？有没有匹配以下JQuery的东西:

$('.mycheckbox:checked').each(function(){

有点混淆如何在angular2 beta中使用Forms(模板或模态驱动froms).

目前我正在使用模态驱动的表单,但在这里得到一些错误是我的form.html:

<form [ngFormModel]="demo">
        <input type="text"  [ngFormControl]="demo.controls['name']">
        <input type="text"  [ngFormControl]="demo.controls['batch']">
        <div> 
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="true"> Active
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="false">Inactive 
        </div>
        <div> 
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="one" value="one"> one
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="two" value="two">two 
        </div>
        <select [ngFormControl]="demo.controls['select']">
            <option value="one">Oone</option>
            <option value="two">two</option>
            <option value="three">three</option>
            <option value="four">four</option>
        </select>
        <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal" (click)="demoSubmit(demo.value)">Done</button>
</form>

和form.ts文件在这里:

import {Component, View} from 'angular2/core';
import {FORM_DIRECTIVES, CORE_DIRECTIVES, FormBuilder, Control, ControlGroup} from 'angular2/common';
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
    selectro: 'Form',
    templateUrl: 'src/components/form/form.html',
    directives: …