标签: angular-template

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker" class="modifyDate" NoSpecialChar ngModel #dateCtrl="ngModel" name="datepicker" (click)="picker.open()" id="dtDeparture" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dateCtrl.errors?.required && dateCtrl.touched">Choose a Date       
</mat-error>

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker1" NoSpecialChar class="modifyDate" [(ngModel)]="inputEndDate" name="dtArrival" (click)="picker1.open()" id="dtArrival" required>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>

正如您在上面看到的，我们为日期输入即picker1 和picker 提供了唯一的ID。问题仍然存在“MatDatepicker 只能与单个输入相关联。” 不知从何而来。我需要帮助。我在谷歌和stackover上搜索过，但没有帮助

我在这里陷入困境。致力于重构一堆相当混乱的角度组件及其模板的 HTML。

问题是，在一种特殊情况下，我不能在 DOM 中拥有父元素。现在，模板选择器设置如下：

<thisComponent *nIf="blah" [someParam]="hello"><thisComponent>

在 DOM 中呈现：

 <thisComponent>
    <div>Hello</div>
    <div>World</div>
 <thisComponent>    

这破坏了我们想要使用的 CSS 并与正在呈现的其余内容保持一致。

我希望在没有父thisComponent元素的情况下完成上述工作。

我在想这样的事情可能会起作用：

<ng-container thisComponent *nIf="blah" [someParam]="hello"></ng-container>

（然后将选择器更改为属性选择器 ala [thisComponent]）

但看来这不起作用。

有没有办法在 DOM 中不渲染父元素的情况下完成上述操作？

更多背景信息。还有另一个重复的问题建议使用属性选择器，但问题是您仍然需要一个父元素（带有属性）。理想情况下，Angular 将允许父元素成为 ng-container，它不会渲染父元素。但这不受支持。

为什么需要这个：

CSS 喜欢干净的 DOM 结构，并且某些功能完全依赖于它......即 Flex 布局。当 Flex 容器和 Flex 对象之间存在额外的 DOM 层时，Flex 布局会完全崩溃。

我将我的模板预先加载到一个javascript字符串数组中,就像var t = JST['firstTemplate']在哪里t一样,

<div>This scope has a value of {{value}}</div>

如何在ng-include指令中使用此预加载的模板？

请注意,此场景中的模板可能更复杂,可能具有嵌套视图和模板以及它们自己的嵌套作用域和控制器.所以我不确定任何ng-bind指令是否有帮助？

更新:

查看ng-include它的来源似乎是一种很好的方法,可以将模板加载逻辑解耦为可自定义的提供程序.

当前的默认加载机制只是做了$http.get与$templateCache作为缓存提供者.看起来我可以将模板内容注入JST['firstTemplate']到模板缓存中,但是我必须在启动时为每个模板执行此操作.

$templateCache.put('firstTemplate', JST['firstTemplate']);

然后有,

<div ng-include="firstTemplate"></div>

我还可以编写一个与每个ng-include并排的自定义指令,它以某种方式预先缓存模板.这再次显得笨重.

更新#2

我将尝试重写templateCache,以便它使用我已经预先加载的JST哈希.如果有效,将发布结果.

我有两个html页面,snippet1.html&snippet2.html.我想在我的指令中使用它们.因为我要使用单指令添加多个模板.

我通过在<script>标签内添加html模板type="text/ng-template"并像下面这样给他们来尝试这件事.

<script type="text/ng-template" id="snippet1.html">
    <div>Here is Snippet one</div>
</script>

<script type="text/ng-template" id="snippet2.html">
    <div>Here is Snippet two</div>
</script>

然后我用$templateCache.get('snippet1.html').这个实现工作正常.

但在我的情况下,我需要从html本身加载它们,所以我决定通过ajax和make加载模板 $http cache: $templateCache

工作JSFiddle

运行阻止

myApp.run(['$templateCache','$http', function($templateCache, $http){ 
  $http.get('snippet1.html',{ cache : $templateCache }); 
  $http.get('snippet2.html',{ cache : $templateCache }); 
}]);

但我的控制器内部$templateCache.get('snippet1.html')未定义.

我的问题是,为什么它在<script>' tag & Why it don't work when I html inside$ templateCache while making$ http` ajax调用中声明模板时工作？

有问题的傻瓜

任何人都可以帮我解决这个问题吗？或者我在代码中遗漏了任何东西.

帮助将非常感谢.谢谢.

我可以在 html 标记中注释属性吗？

我需要做这样的事情：

<hero-detail 
     <!--comments goes here-->
     hero="currentHero">
</hero-detail>

但这不起作用。怎么做到呢？

我目前有一个主页,可以路由到我公司运行的所有不同工作流程.我们有大约15个不同的工作流程,每个工作流程都由用户角色保护.如果您在数据库中没有正确的用户角色,则不会看到该页面的相应链接.我们保护服务器端点,但我担心的是向人们显示链接或不显示链接的最佳方式是什么,我宁愿不重复代码.

这是一种方法:

我有一个像这样的html页面

<ul>
  <li *ngIf="authService.hasRequiredRole('users.user-admin')" routerLink="/user">Users</li>
  <li *ngIf="authService.hasRequiredRole('users.role-admin')" routerLink="/role">Roles</li>
</ul>

我有这样的身份验证服务:

hasRequiredRole(roles: string | [string]) {
    if (typeof roles === 'string') {
      roles = [roles];
    }
    for (const roleSlug of roles) {
      if (this.user.roles.find((role: any) => {
          return role.slug === roleSlug;
      })) {
        return true;
      }
    }
    return false;
  }

我有一个像这样的路由的路由器:

const routes: Routes = [{

  path: 'user',
  data: {
    allowedRoles: 'users.user-admin'
  },
  loadChildren: 'app/user/user.module#UserModule',
  canActivate: [AuthGuard]
},
{ path: 'home', component: HomeComponent }]

AuthGuard只检查用户是否已登录,然后使用路由中的数据来检查用户是否具有正确的角色.

如您所见,我们使用字符串'users.user-admin'有两个不同的位置.

我想我们应该有一个带两个警卫的路由器.一名警卫将检查用户是否已登录,另一名警卫将检查用户是否具有正确的角色.该角色将在此处进行硬编码:

export class …

如何在Angular中进行插槽转换而不包括包装标签？

例如:

这是带选择器的组件模板my-component:

<div class="my-component">
   <p class="some sensitive css-classes">
       <ng-content select="sub-header"></ng-content>
   </p>

   <p class="more sensitive css-classes">
       <ng-content select="sub-footer"></ng-content>
   </p>
</div>

这是用数据填充模板的组件之一

<my-component>
    <sub-header>
        Very <strong>important</strong> text with tags.
    </sub-header>

    <sub-footer>
        More <em>important</em> text with tags.
    </sub-footer>
</my-component>

转换结果如下:

<div class="my-component">
   <p class="some sensitive css-classes">
       <sub-header>
          Very <strong>important</strong> text with tags.
       </sub-header>
   </p>

   <p class="more sensitive css-classes">
       <sub-footer>
           More <em>important</em> text with tags.
       </sub-footer>
   </p>
</div>

由于语义和非常敏感的CSS样式,这不是很有用

如何进行如下所示的转换:

<div class="my-component">
   <p class="some sensitive css-classes">
       Very <strong>important</strong> text with tags. …

如果 angular < 4.3.6 不适用，该代码至少适用于 angular 2。

目前gradingKey对象在显示或编辑模板中是未定义的。

它在 getTemplate(gradingKey) 方法中不是未定义的。

gradingKey 被初始化为类字段

成分

@Input() set gradingKeyModel(gradingKeyModel: GradingKeyModel) {
    this.gradingKey = gradingKeyModel.gradingKey;
}

html

<ng-template [ngTemplateOutlet]="getTemplate(gradingKey)" 
             [ngTemplateOutletContext ]="{ $implicit: gradingKey }">
</ng-template>

<ng-template #displayTemplate let-gradingKey>
    <div>
        {{gradingKey}}       
    </div>
</ng-template>

<ng-template #editTemplate let-gradingKey>
    <div>
        {{gradingKey}}       
    </div>
</ng-template>

为什么模板中的 gradingKey 突然未定义？

使用 ngTemplateOutletContext 时，访问 ngOutletContext 的方式是否发生了变化？

我试图用包含columns definition和它的结构化数据实现网格组件data array.

callback每列的定义中都有一个函数,用于自定义显示该列的值.

在每个内部callback,它调用console.log()来显示回调函数的调用次数.

我不知道为什么回调函数在开始时调用了四次,并且two times在changeSort()事件发生后!请告诉我.

我写了下面的表组件:

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  // @Input() public grid: {
  //   columns: any[],
  //   data: any[]
  // };

  public grid: any;

  constructor() {
    this.grid = {
      columns: [],
      data: [],
    };
  }

  ngOnInit() {
    this.grid = {
      data: [
        {
          desc: 'hello 1',
          header: …

我尝试了很多次搜索次数，但我没有得到任何禁用 div 元素点击的解决方案。已经提出问题，但他们说在 div 上不可能，我只想知道，有没有办法在angular2 中禁用 div

<div>(click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
   [class.isDisabled]="isDisabled"></div>