程序设计 angular

23

在我的Angular 2应用程序中，当我向下滚动页面并单击页面底部的链接时，它确实会更改路线并带我进入下一页，但不会滚动到页面顶部。结果，如果第一页很长而第二页的内容很少，则给人的印象是第二页缺少内容。由于仅当用户滚动到页面顶部时内容才可见。我可以将窗口滚动到该组件的ngInit中的页面顶部，但是，有没有更好的解决方案可以自动处理应用程序中的所有路由？

295 angular typescript angular2-routing angular2-template angular2-directives

2

npm软件包上的“ at”（@）前缀是什么意思？

在Angular Component Router文档中我偶然遇到了一个从未见过的npm命令，我不知道发生了什么： npm install @angular/router --save 的意义是什么 @angular/router？整个字符串是包名吗？但是当我在npmjs.com上使用搜索时，却找不到该包。命令行搜索也不会返回任何此类包： npm search @angular/router :No match found for "@angular/router" 那么@angular/npm中的某种前缀机制呢？以及它如何运作？

293 javascript angular npm

15

检查表达式___后已更改

为什么在这个简单的组件普拉克 @Component({ selector: 'my-app', template: `<div>I'm {{message}} </div>`, }) export class App { message:string = 'loading :('; ngAfterViewInit() { this.updateMessage(); } updateMessage(){ this.message = 'all done loading :)' } } 抛出：例外：表达式'我在App @ 0：5中是{{message}}”已被检查。先前的值：[我在App @ 0：5的{{message}}}中的“我正在加载:('。当前值：'我已经完成加载：)” 当我正在做的所有事情都是在启动视图时更新一个简单的绑定吗？

286 typescript angular

13

例外：无法绑定到“ ngFor”，因为它不是已知的本机属性

我究竟做错了什么？ import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `<div *ngFor="talk of talks"> {{talk.title}} by {{talk.speaker}} <p>{{talk.description}} </div>` }) class ConfTalks { talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'}, {title: 't2', speaker: 'Julie', description: 'talk 2'}]; } @Component({ selector: 'my-app', directives: [ConfTalks], template: '<conf-talks></conf-talks>' }) class …

285 angular typescript angular2-directives ngfor

11

每个按键上的Angular 2更改事件

仅在输入的焦点已更改后才调用change事件。如何使事件在每次按键上触发？ <input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" /> {{mymodel}} 第二个绑定会在每次按键时改变。

282 angular

22

如何将过滤器应用于* ngFor？

显然，Angular 2将使用管道代替Angular1中的ng-for过滤器来过滤结果，尽管实现起来似乎还很模糊，没有明确的文档。即我可以从以下角度看待我要实现的目标 <div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div> 如何使用管道来实现？

278 angular typescript

12

Angular2异常：由于它不是已知的本机属性，因此无法绑定到“ routerLink”

显然，Angular2的Beta版比新的要新，因此那里没有太多的信息，但是我正在尝试做一些我认为比较基本的路由。从https://angular.io网站上窃取快速入门代码和其他代码片段导致了以下文件结构： angular-testapp/ app/ app.component.ts boot.ts routing-test.component.ts index.html 文件填充如下： index.html <html> <head> <base href="/"> <title>Angular 2 QuickStart</title> <link href="../css/bootstrap.css" rel="stylesheet">  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script>  <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' …

277 angular

9

如何在Angular 2中添加条件属性？

如何有条件地添加一个元素属性，例如checked复选框的？ NgAttr我认为Angular的早期版本已经提供，而我认为NgChecked它们似乎都提供了我所追求的功能。但是，这些属性在Angular 2中似乎不存在，我看不到提供此功能的其他方法。

276 javascript angular

27

如何将真棒字体添加到Angular 2 + CLI项目

我正在使用Angular 2+和Angular CLI。如何在我的项目中添加超棒的字体？

269 angular webpack angular-cli

13

如何将数据传递到Angular路由组件？

在我的Angular 2路线模板之一（FirstComponent）中，我有一个按钮 first.component.html <div class="button" click="routeWithData()">Pass data and route</div> 我的目标是实现：单击按钮->路由到另一个组件，同时保留数据并且不使用另一个组件作为指令。这就是我尝试过的... 第一种方法在同一视图中，我存储的是基于用户交互收集的相同数据。 first.component.ts export class FirstComponent { constructor(private _router: Router) { } property1: number; property2: string; property3: TypeXY; // this a class, not a primitive type // here some class methods set the properties above // DOM events …

268 angular typescript

11

如何将url参数（查询字符串）传递给Angular上的HTTP请求？

我正在Angular上创建一个HTTP请求，但我不知道如何向其添加url参数（查询字符串）。 this.http.get(StaticSettings.BASE_URL).subscribe( (response) => this.onGetForecastResult(response.json()), (error) => this.onGetForecastError(error.json()), () => this.onGetForecastComplete() ); 现在，我的StaticSettings.BASE_URL类似于没有查询字符串的url，例如：http ://atsomeplace.com/，但我希望它成为http://atsomeplace.com/?var1=val1&var2=val2 哪里var1和var2适合我的Http请求对象？我想像一个对象一样添加它们。 { query: { var1: val1, var2: val2 } } 然后只有Http模块完成将其解析为URL查询字符串的工作。

265 http angular typescript

16

如何从父组件的CSS文件设置子组件的样式？

我有一个父组件： <parent></parent> 我想用子组件填充该组： <parent> <child></child> <child></child> <child></child> </parent> 父模板： <div class="parent">  <ng-content></ng-content> </div> 子模板： <div class="child">Test</div> 由于parent和child是两个独立的组件，因此它们的样式被锁定在自己的范围内。在我的父组件中，我尝试执行以下操作： .parent .child { // Styles for child } 但是.child样式没有被应用到child组件。我尝试使用styleUrls将parent的样式表包含到child组件中来解决范围问题： // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] 但这无济于事，还尝试了另一种方法，即将child样式表提取进来，parent但这也无济于事。那么，如何设置父组件中包含的子组件的样式？

264 css angular angular-components

23

将lodash导入angular2 +打字稿应用程序

我很难尝试导入lodash模块。我已经使用npm + gulp设置了我的项目，并不断碰壁。我尝试过常规lodash，但也尝试过lodash-es。 lodash npm软件包：（在软件包根文件夹中有一个index.js文件） import * as _ from 'lodash'; 结果是： error TS2307: Cannot find module 'lodash'. lodash-es npm软件包：（在package根文件夹中的lodash.js中具有默认输出） import * as _ from 'lodash-es/lodash'; 结果是： error TS2307: Cannot find module 'lodash-es'. gulp任务和webstorm都报告相同的问题。有趣的是，这没有返回错误： import 'lodash-es/lodash'; ...但是当然没有“ _” ... 我的tsconfig.json文件： { "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", …

262 javascript angular typescript lodash es6-module-loader

16

定义全局常数

在Angular 1.x中，您可以定义如下常量： angular.module('mainApp.config', []) .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/') Angular（带有TypeScript）的等效功能是什么？我只是不想在所有服务中一遍又一遍地重复API基本URL。

258 typescript angular

15

使用管道将日期格式设置为dd / MM / yyyy

我正在使用date管道设置日期格式，但是如果没有解决方法，我将无法获得所需的确切格式。我是错误地理解管道还是只是不可能？ //our root app component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <h2>Hello {{name}}</h2> <h3>{{date | date: 'ddMMyyyy'}}, should be {{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3> </div> `, directives: [] }) export class App { constructor() { this.name = 'Angular2' this.date = …

257 date angular angular-pipe date-pipe

Questions tagged «angular»