小编Dr.*_*ool的帖子

Angular 2 备忘单显示routerLink模板中有和没有方括号的示例:

<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">

功能有什么不同？

我真的很高兴学习使用AngularJS.现在我正在寻找可以使用它的组件.我一直在关注Angular-UI组件,但我想知道是否可以在ExtJS中使用漂亮的,增压的组件.有任何人对此有经验吗？任何提示或技巧或Angular指令库？

我正在尝试导出动态生成的图表,我注意到有些东西没有导出.例如,我的图表有PlotBands,它们是动态的,具体取决于显示的数据.

当我构建我的图表时,我遵循了所有伟大的HighChart示例的标准代码布局,我在文档加载时立即生成了图表.然后在我的代码中,我使用Ajax调用来加载数据并修改标题,绘图带,自定义文本等内容.

问题是在初始图表加载后在图表上修改的任何内容都不会导出到图像或PDF.在Ajax调用期间添加了我的PlotBands.它们无法包含在构建的图表对象中document.load().所以HighCharts很容易忽略它们.

在我的图表中,我想在不同地点的24小时内显示能源使用情况.用户可以选择不同的日期和不同的站点.Plot Bands需要突出显示运行时间,每个站点都有不同的运行时间,这些运行时间都加载了数据.此外,图表标题显示网站名称,副标题显示平方英尺.

此外,我的代码使用HighCharts渲染器text()命令在图形底部绘制一些自定义文本.

我几乎没有功能的导出代码看起来像这样:

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: "ChartContainer",
            type: "line",
            title: { text: null },
            subtitle: { text: null }
        }
    }
});

function UpdateChart() {
    $.ajax({
        url: "/my/url.php",
        success: function(json) {
            chart.addSeries(json[1]);
            chart.addSeries(json[2]);
            chart.setTitle(json[0].title, json[0].subtitle);
            chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } });
            chart.renderer.text("Custom Text", 50, 100); …

我会发布代码,但我真的不知道从哪里开始.我已经阅读了https://angular.io/docs/ts/latest/guide/animations.html动画指南,但它没有满足我的要求.

因此,假设您有一个显示的项目列表,使用*ngFor和列表顶部包含排序按钮.例如,默认排序是"名称".它会在初始屏幕上显示如下

Sort By: Name | Value
[name: a, value:3]
[name: b, value:2]
[name: c, value:1]

然后让用户按"值"按值排序.

Sort By: Name | Value
[name: c, value:1]
[name: b, value:2]
[name: a, value:3]

我知道我可以简单地将绑定到视图组件的列表排序,但我想要动画.使用当前的Angular 2 Animation API,这是否可能？

还在学习Angular2.有一个表单,我有一个startDate和endDate,我希望每个都有输入项.我正在使用与模型对象的双向绑定到表单.

<input type="date" name="EndDate" class="form-control input-sm" [(ngModel)]="selectedDeal.Enddate" required /> 

我的模型的日期属性是Date类型:

public EndDate: Date,

当我运行它并绑定具有有效日期的模型时,它只在文本框中显示mm/dd/yyyy.我认为HTML5 type ="date"支持.但它没有显示实际日期.它内置了日期选择器,非常好,但没有显示属性中已有的日期.

如果我将type ="date"更改为type ="text",我会看到2018-12-31T00:00:00之类的内容,并且会丢失我的日期支持,此外,这不是用户友好的.

我试图避免:1)必须使用错误的数据类型(字符串)并将我的日期格式化为字符串以供使用 - 这似乎是一个坏主意和实践2)使用Javascript post表单显示尝试覆盖值字符串格式的日期文本

有没有更简单的方法来处理这个？

我正在尝试为input元素创建一个指令,该指令将动态创建一个ng-pattern以检查输入字段中的有效IP地址.我所有这样做的尝试都是完全不成功的.虽然我可以动态修改其他属性,但我无法创建ng-pattern会影响$valid状态的属性.

这是我一直在努力的代码,它看起来应该可以工作,但它对它没有任何作用ng-pattern.

app.directive('ipAddress', function($parse) {
    return {
        link: function(scope, element, attrs) {
            var model = $parse(attrs.ngPattern);
            model.assign(scope, "/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/");
            scope.$apply();
        };
});

指示:

<input ng-model="ip" ip-address required type="text" id="inputIP" placeholder="xxx.xxx.xxx.xxx">

是的,我知道我可以只使用标签指定ng-pattern内联,<input>但重点是我希望能够在代码中动态地执行此操作,并且我希望<input>通过不在那里嵌入一堆正则表达式来保持标签更清晰.

谁能帮帮我吗？谢谢!

我正在尝试创建一个循环来显示几个div,介于一到七之间.

但是,每个div都有一个<p> Pick your 1st photo </p>,第一个项目会说1st,第二个2nd,第三个3rd等等.

我怎么能处理这样的事情？

<div *ngFor="let item of items">
  <p>Pick your ___ photo</p>
</div>

谢谢

我有这样的父类:

export class BaseForm {
  @Output() public eventSubmit:EventEmitter<any> = new EventEmitter<any>();

  public emitForm() :void {
   const params = this.getParams();
   this.eventSubmit.emit(params);
  }

  public onSubmit(){
  if (!this.isValid) {
   return;
  }
  this.emitForm()
 }
}

和孩子:

@Component({
  selector: 'app-auth-form',
  templateUrl: './auth-form.component.html',
  styleUrls: ['./auth-form.component.styl'],

})
export class AuthFormComponent extends BaseForm { }

然后我尝试绑定另一个组件,如下所示:

<app-auth-form
  (eventSubmit)="tap($event)"
  [error]="error">
</app-auth-form>

tap只是显示发出的数据.所以,然后我在BaseForm中发出一些东西,我在日志中没有任何东西.有任何想法吗？