我正在使用Angular2 + WebPack + Typescript 1.7 stack + SASS + CommonJs.
我有webpack SASS加载器配置为使用"style!css!sass"加载器来监视scss文件.
在我的组件中,我有@View装饰器,它包含样式或styleUrls参数,可用于传递此组件的内联样式或样式URL.
如果我将指定其中一个@View参数,Angular2会自动加载指定的css文件或(或将内联css),这对我有用.
但是如果我将使用sass-loader + require(),这将使我能够将scss编译为css并将其内置到我的js文件中(我使用ts-loader并将所有脚本合并到app.js中) .
所以我可以使用stylesUrl通过Angular2自动预加载css文件.
@View({ stylesUrl: 'my.css'}) export class Component{}
或者我可以使用require('*.scss')将css合并到我的app.js中
require('styles/my.scss');
@View({}) export class Component{}
对此更好的方法是什么,我的意思是Angular2方式？
此外,我可以从所有scss文件预构建一些common.css,并且只是避免为组件指定任何样式.而且index.html中只包含1个common.css + common.css.map文件(用于调试)
PS关于最后一种方法(合并所有css文件)
//webpack.config.js
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', ['css?sourceMap', 'sass?sourceMap']),
include: path.join(__dirname, 'src', 'styles'),
}
...
plugins: [
new ExtractTextPlugin("assets/path/styles.css?[hash]-[chunkhash]-[contenthash]-[name]", {
disable: false,
allChunks: true
})
//index.html
<link rel="stylesheet" href="assets/path/styles.css" />
所以现在我有CDN供应商链接到css.所有我的自定义css(用scss编写)都合并到1个文件styles.css中,它们为所有组件加载一次.
此方法启用了sourceMap.但澄清在调试中修改哪个scss文件有点棘手..而且Angular @View声明中也没有任何信息
我有下面的代码,它工作正常,它做的是ng为重复为列对象中的每列创建一列.
目前,它显示每列中卡片对象的每张卡片.
我想要它只是在列WHERE column.id = card.column中显示卡片
如何修改我的代码才能执行此操作？
import {Input, Output, EventEmitter, Component, Injectable} from 'angular2/core'
import {NgFor} from 'angular2/common'
import {Observable} from 'rxjs/Observable';
interface Card {
id?: number;
title?: string;
column?: number;
}
@Injectable()
export class DataService {
cards$: Observable<Array<Card>>;
private _cardsObserver: any;
private _dataStore: Array<Card>;
constructor(){
this._dataStore = [
{id: 1, title: 'Card A', column: 1},
{id: 2, title: 'Card B', column: 2},
{id: 3, title: 'Card C', column: 2}
];
this.cards$ = new Observable(observer =>
this._cardsObserver = observer).share(); …鉴于以下......
<form (ngSubmit) = "onSubmit()"
#heroForm = "ngForm">
{{diagnostic}}
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text"
class = "form-control"
required
[(ngModel)] = "model.name"
ngControl = "name"
#name = "ngForm"
#spy>
<p *ngIf = "name.dirty"
class = "alert alert-danger">
Name is required
</p>
<!--<p [hidden] = "name.dirty"-->
<!--class = "alert alert-danger">-->
<!--Name is required-->
<!--</p>-->
</div>
..
..是否可以#name = "ngForm"在.dart组件中获取(ngForm)引用以允许操作？欢迎提出任何建议和更正.
使用的浏览器 - Chrome 67.0.3396.99我创建了一个DialogsModule,它有一个组件ConfirmDialog.component.ts,其中包含以下模板confirm-dialog.component.html
<mat-dialog>
<mat-dialog-title>{{title}}</mat-dialog-title>
<mat-dialog-content>{{message}}</mat-dialog-content>
<mat-dialog-actions>
<button type="button" mat-raised-button color="primary"
(click)="dialogRef.close(true)">Yes</button>
<button type="button" mat-button
(click)="dialogRef.close()">No</button>
</mat-dialog-actions>
</mat-dialog>
我收到错误后出现错误
*Uncaught Error: Template parse errors:
'mat-dialog-title' is not a known element:
1. If 'mat-dialog-title' is an Angular component, then verify that it is part of this module.
2. If 'mat-dialog-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-dialog> [ERROR ->]<mat-dialog-title>{{title}}</mat-dialog-title>
<mat-dialog-content>{{message}}</mat-dialog-content>"): ng:///DialogsModule/ConfirmDialog.html@2:1
'mat-dialog' is not a known element:
1. If …我在Angularjs 1.3中有java REST服务和消费者.服务是基于JSON的,并且期望BASIC身份验证(用户名密码).在AgJs 1.3中,我使用Base64工厂代码(在谷歌上找到)从用户名和密码创建基本身份验证令牌,并能够使用服务SUCCESSFULLY.
我在AgJs 2.0文档中读取了HTTP类,但是我没有找到有关基本身份验证的任何信息.
有人可以提供示例代码来使用BASIC身份验证在Angularjs 2.0中使用REST服务吗？
提前致谢!
最好的祝福!
我的AgJs 1.3代码:
var url =" http:// xxxx:xxxx/data / "+ number;
$http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('username' + ':' + 'password');
$http.defaults.headers.common['Content-Type'] = 'application/json';
$http({ method: 'GET', url: url }).
success(function (data, status, headers, config) {
alert(data);
}).
error(function (data, status, headers, config) {
alert("error: " + data);
});
任何人都知道如何使用Browserify-Shim Angular 2,同时保持Angular外部而不是在构建中捆绑它？
//package.json
{
"name": "testapp",
"version": "1.0.0",
"main": "./app.js",
"browserify-shim": {
"angular2": "global:angular2"
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"browserify-shim": "~3.2.0"
}
}
...
//app.ts
import {Component, View, bootstrap, NgFor} from 'angular2';
结果:
TypeError: angular2_1 is undefined
我正在尝试控制我们可以输入带有标签和分数的多个玩家.
但是当我们单击我的AddPlayer按钮时,我创建了一个播放器,然后我需要将表单控件值重置为默认值.
我已经尝试了很多东西,但没有任何作用....它永远不会改变视图值.
这是代码:
addPlayer(form: ControlGroup) {
var player = new Player();
player.tag = form.value.tag;
player.name = form.value.name;
player.score = form.value.score;
// nothing work
form.value = null;
form.value.tag = null;
form.value.tag = '';
this.playerService.addPlayer(player.tag, player.name, player.score);
this.newplayer.next(player);
}
这是html
<form (submit)="addPlayer(playerForm)" [ng-form-model]="playerForm">
<div class="form-group" [class.has-error]="!playerForm.find('tag').valid && playerForm.find('tag').touched">
<div class="col-md-3 text-right">
<label for="tag">Tag: </label>
</div>
<input type="text" id="tag" #tag="form" [ng-form-control]="playerForm.controls['tag']" placeholder="Tag"/>
<span *ng-if="tag.control.hasError('required') && !tag.control.pristine">Tag is required</span>
</div>
<div class="form-group" [class.has-error]="!playerForm.find('name').valid && playerForm.find('name').touched">
<div class="col-md-3 text-right">
<label for="name">Player Name: </label>
</div> …我一直在尝试调试奇怪的问题,我终于弄清楚它为什么会发生.只是不确定如何防止它(;我有这个功能:
getInfo(id) {
id = id || "zero";
let i = routeDefinitions.findIndex(r => Boolean(r.name.toLowerCase().match(id)));
// console.log(i) - works in plunker
// but in my app sometimes returns -1...
let current = routeDefinitions[i];
let next = routeDefinitions[i + 1] ? routeDefinitions[i + 1] : false;
let prev = routeDefinitions[i - 1] ? routeDefinitions[i - 1] : false;
return { prev, current, next };
}
..在这个plunker中完美运行,但在我的应用程序中,我使用其返回值来更新应用程序状态(redux模式的自定义实现).当我通过此函数发送返回值时:
private _update(_old, _new) {
let newState = Object.keys(_new)
.map(key => {
if …以下在表单中工作(显示表单)
<form (ngSubmit) = "onSubmit()"
#nameForm = "ngForm">
{{diagnostic}}
<div class = "mdl-card mdl-shadow--3dp layout horizontal wrap">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">Name</h2>
</div>
<div
class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input
required
type = "text"
[(ngModel)] = "name.first"
ngControl = "first"
#first = "ngForm"
(input)="onInputHandler($event)"
class = "mdl-textfield__input ng-valid"
id = "first">
<label
class = "mdl-textfield__label"
for = "first">First</label>
<span [hidden] = "isFirstValid"
class = "mdl-textfield__error">{{firstErrorMsg}}</span>
</div>
<div class =
"mdl-card__actions mdl-card--border">
<button id = "startButton"
class …RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })
6.1.0 中的此新功能无法按预期工作。ViewportScroller 服务似乎在填充 DOM 元素之前尝试恢复滚动位置，因此最大滚动高度本质上是设备高度。结果，恢复的滚动位置没有达到预期目的。
我尝试按照文档的建议对自定义滚动位置恢复执行以下操作，但无济于事：
dataObsevable.pipe(withLatestFrom(scrollEvents)).subscribe(([list, e]) => {
this.data = list;
if (e.position) {
viewPort.scrollToPosition(e.position);
} else {
viewPort.scrollToPosition([0, 0]);
}
});
管道化 observable 返回的位置正确地是页面导航之前滚动位置的值。但是，似乎 viewPort.scrollToPosition() 在 DOM 元素完成初始化之前尝试滚动页面，因此它什么都不做。
angular ×10
dart ×2
angular6 ×1
browserify ×1
immutability ×1
javascript ×1
sass ×1
typescript ×1
webpack ×1