angular5 相关问题

使材质表列的内容动态宽度

经过大量修改，我终于为我的材质表有了一个不错的设置。 它有分页，有排序，有我需要的所有东西。 然而，它看起来不太好，因为我的几个colu...

Angular5 - 动态设置 div 容器的颜色

使用 AngularJS 效果很好： 但 Angular5 则不然。如何用 Angular5 做到这一点？

自定义密码匹配验证器在 angular5 中不起作用

我正在实现自定义验证器来匹配组件中的密码。 这是我的 component.ts 表单声明 this.addUserForm = 新的 FormGroup({ 名字：new FormControl('', [Validators.req...

Angular 5：从 URL 获取主机名和应用程序名称

我当前的网址是： https://localhost:8080/MyApp/manager/dashboard 在上面的 url 中，我只想获取 https://localhost:8080/MyApp/ 部分。 有没有什么方法可以在不进行硬编码的情况下获取它

“mat-toolbar”不是已知元素 - Angular 5

我创建了一个新项目，我正在尝试添加角度材料。 我在我的应用程序文件夹中创建了material.module.ts： 从“@angular/core”导入{NgModule}； 进口 { MatButton 模块，...

为什么我应该在 Typescript / Angular 中使用接口（模型）？

在我看来，用模型定义对象似乎使它们变得僵化且不易更改，从而更容易在将来破坏应用程序并添加代码行而没有任何好处。对于...

如何在Angular 5中获取计算机和浏览器的设备ID？

我正在使用 Angular 5 开发 WEB 银行应用程序。任务是我想找出计算机的设备 ID 和浏览器名称。 我尝试了这个 NPM 模块： npm 安装 ngx-device- detector --save 导入 { NG...

在 Angular 6 中如何使 url 模式不区分大小写？

就我而言，我想以不区分大小写的方式支持相同的网址。 示例：它应该支持所有 url 本地主机:1029/文档 本地主机:1029/文档 本地主机:1029/文档 本地主机：

Angular 5 基于角色的路由

我有一个网站，其主页在我的路由模块中定义为： const appRoutes: 路由 = [ { 小路： ''， 组件：HomeComponent }]; 现在我想为管理员显示不同的主页

指定的日期值不符合Angular 5要求的格式

在我的 Angular 应用程序中，我在输入字段中显示从 API 到组件的数据。 所有字段都已填充，但日期类型的输入元素未填充 下面是 html 标记 在我的 Angular 应用程序中，我在输入字段中显示从 API 到组件的数据。 所有字段都已填充，但日期类型的输入元素未填充 下面是 html 标记 <input [(ngModel)]="CustomerVM.customer.CustomerDob" type="date" name="MemberDateOfBirth" class="form-control" (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)"> 控制台显示 指定的值“2018-09-21T00:00:00”不符合要求的格式“yyyy-MM-dd”。 我制作了一个通用函数，将服务中的日期格式设置为 FormatDate(iDate: Date) { var inputDate:Date= new Date(iDate); var formattedDate = new Date(inputDate.getUTCDate(), (inputDate.getUTCMonth() + 1), inputDate.getUTCFullYear()); return formattedDate; } 和 this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(this.CustomerVM.customer.CustomerDob); 但它在日期字段中不显示值 在插值块内，我们可以使用管道格式化值 {{DOB | date:'mediumDate'}} 我们也可以用 ngModel 来做这个吗？因为我不需要格式化它的方法。 我怎样才能实现这个目标？ 动作表达式不能包含管道。您可以通过将 [(ngModel)] 提供的双向绑定分为属性绑定和事件绑定来实现更复杂的绑定。然后可以将日期管道包含在属性绑定表达式中： <input [ngModel]="item.value | date:'yyyy-MM-dd'" (ngModelChange)="item.value=$event" type="data" /> 示例中的 input 标签需要如下所示的内容： <input [ngModel]="CustomerVM.customer.CustomerDob | date:'yyyy-MM-dd'" (ngModelChange)="CustomerVM.customer.CustomerDob=$event" type="date" name="MemberDateOfBirth" class="form-control" (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)"> 你的服务应该是这样的： FormatDate(iDate: Date) { var inputDate = new Date(iDate); var formattedDate = inputDate.getFullYear()+'-'+(inputDate.getMonth() + 1)+'-'+ inputDate.getDate(); return formattedDate; } 在你的 ts 文件中应该有这样的： let newDate = new Date(this.CustomerVM.customer.CustomerDob); this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(newDate); 日期的响应是时间戳格式。时间戳值未填充您的日期字段，因此您需要将时间戳格式转换为日期格式。 var datePipe = new DatePipe("en-US"); let formatedyear = datePipe.transform(this.CustomerVM.customer.CustomerDob, 'MM/dd/yyyy'); this.CustomerVM.customer.CustomerDob = formatedyear; 然后从 '@angular/common' 导入 { DatePipe } ；在你的组件中 使用 ngValue 正如我在他们的文档中看到的那样，如果你想使用 Angular datepicker，你需要： 修复 从输入中删除 type="date" 说明 HTML5 的格式为 yyyy-MM-dd，而 Angular 的格式为 dd-MM-yyyy。

如何在 Angular 5 中路由到外部链接

这可能是一个愚蠢的问题，但我是 Angular 的新手，还没有得到答案。 我正在遵循一个教程，并为我的 Angular 5 项目设置了这样的路线： 导入{NgMo...

mat-slide-toggle 不应更改其状态

当我检查滑动开关时，它应该按预期工作。但是当我尝试取消选中它时，会出现一个确认窗口，询问您是否确定。当我在确认窗口中单击“取消”时，仍然...

如何使用角度材料在工具提示中选择选定的值

我正在使用角度材料垫选择显示一个下拉菜单。我想使用材质工具提示显示选定的元素。 我正在使用角度材料垫选择显示一个下拉菜单。我想使用材质工具提示显示选定的元素。 <mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}} (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> </mat-form-field> 但是它显示了[对象对象] 这里是emp的内容 emp[ {"id":0101,"name":"damshad"}, {"id":0102,"name":"ranjan"}, {"id":0103,"name":"himanshu"}, {"id":0104,"name":"gourge"}, {"id":0105,"name":"taffic"}, {"id":0106,"name":"ajir"}, {"id":0107,"name":"mallom"} ] 请帮忙 您错过了{{}}关闭大括号。 我已经在 stackblitz 上创建了演示 HTML代码 <mat-select [(ngModel)]="selected" matTooltip="{{getToolTipDEata(selected)}}" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> ts代码 selected=null; emp=[{ name:'emp 1' },{ name:'emp 2' }] getToolTipDEata(data){ if(data && data.length){ let msg=""; data.forEach(res=>{ msg+=res.name + " "; }) return msg; }else{ return "please select employee"; } } 如果您只想获取工具提示中的垫子选择“触发器”上显示的内容，请使用 triggerValue: <mat-select #matSelect [matTooltip]="matSelect.triggerValue"> </mat-select> 适用于 ngModel、反应式表单和多项选择 您可以简单地将 ngModel 传递给 Tooltip，也可以使用 matTooltipPosition 更改位置。 <mat-select [(ngModel)]="emp" matTooltip="{{emp}}" matTooltipPosition="above|below|left|right" > <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> 原代码 <mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}} (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> </mat-form-field> 我的代码 <mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{toppings.value.name}} (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> </mat-form-field> 要根据所选值显示工具提示，您必须为 mat-select 元素定义 id，然后您可以引用其“selected”属性 <mat-select #testid [matTooltip]="testid .selected?.viewValue" (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> 我想你错过了 } matTooltip="{{selected}

在 Angular 5 中安排任务

如何在 Angular 5 中插入事件日历？ 经过大量研究，我找到了 FullCalendar，但在实施我的 Angular 项目 5 时遇到了很多问题。 有谁知道类似的东西...

（类型错误：无法在 HttpHeaders.applyUpdate 中读取 null 的属性“长度”）Angular 5，Http 客户端

我在服务中发出 http 请求时收到此响应。 这是登录组件 导出类 LoginComponent { 凭证：凭证； 构造函数（ 私人身份验证：AuthServic...

Angular Service Worker - 无法加载资源：服务器响应状态为 504（网关超时）

我在 Angular 5.2.5 应用程序中使用 Angular-CLI 1.6.6 和 @angular/service-worker 5.2.5。除了一个错误之外，本地精简版服务器以及生产服务器上的一切都运行良好

如何在角度中默认选择垫按钮切换

如何设置默认选择切换组中的最后一个按钮。 这是我的代码。 &l...

当我们使用platform-browser-dynamic时，我们还需要platform-browser吗？

在此答案中指出，platform-browser 用于 AOT 编译，而 platform-browser-dynamic 用于 JIT 编译。 我们正在尝试使用 UMD mod 在我们自己的架构中使用 Angular...

有没有办法在 ng-multiselect-dropdown 关闭时添加功能？

我正在 Angular 5 中使用 ng-multiselect-dropdown 包来创建多选下拉列表。 我想在关闭或隐藏下拉组件时调用函数。 像这样 关闭Dropd...

使用 SVG 模板注入动态组件

是否可以注入作为子 svg 元素的动态组件？ 例如，我有一个主要组件 (CanvasComponent) ，它的模板是这样的 是否可以注入作为子 svg 元素的动态组件？ 比如我有一个主组件（CanvasComponent），它的模板是这样的 <svg width="400" height="400"> <ng-template appCanvasAnchor></ng-template> </svg> ng-template 是用于动态注入组件的锚点https://angular.io/guide/dynamic-component-loader 动态（SquareComponent）已经有了这个模板 <svg:rect width="100" height="100" style="fill:red" /> 现在，由于动态组件添加到 DOM 的方式，当我的 Square 组件添加到 DOM 时，它将被包含在 div 元素中，如下所示。 <svg width="400" height="400"> <div app-square> <rect width="100" height="100" style="fill:red" /> </div> </svg> 理论上，一切都工作得很好，除了这是 SVG，因此我的方块不会渲染，因为它有未知的标记（div）。这里的问题是，我可以以某种方式改变注入器使用的元素，以便它不使用 div，而是使用 svg 知道像 g 这样的元素吗？ 不确定模板，但可以在一些解决方法的帮助下通过内容投影动态注入 svg-s。 主要的解决方法是找到一种方法来删除组件的宿主元素，这可以通过创建如下指令来处理，该指令将处理某些元素的“展开”。如下所示，该指令执行类似于 js 中的展开运算符的操作，它获取其所附加的元素的所有子元素并将它们展开到父元素的级别 @Directive({ selector: '[appRemoveHost]', standalone: true, }) export class RemoveHostDirective { constructor(private el: ElementRef) {} //wait for the component to render completely ngOnInit() { var nativeElement: HTMLElement = this.el.nativeElement, parentElement: HTMLElement = nativeElement.parentElement; // move all children out of the element while (nativeElement.firstChild) { parentElement.insertBefore(nativeElement.firstChild, nativeElement); } // remove the empty element(the host) parentElement.removeChild(nativeElement); } } 感谢这个问题和答案删除由角度组件创建的主机 HTML 元素选择器 之后，您只需为要使用的 SVG 元素创建包装器组件即可。 示例画布组件看起来像这样 @Component({ selector: 'app-canvas', template: `<svg width="400" height="400"> <ng-content></ng-content> </svg>`, standalone: true, imports: [CommonModule], }) export class CanvasComponent {} 自定义 SVG 元素可以如下所示 @Component({ selector: 'app-custom-rect,[app-custom-rect]', template: `<svg appRemoveHost> <rect [attr.x]="x" [attr.y]="y" [attr.width]="width" [attr.height]="height" style="{{ style }}" /> </svg>`, standalone: true, imports: [CommonModule, RemoveHostDirective], }) export class CustomRectComponent { @Input() style = ''; @Input() x = ''; @Input() y = ''; @Input() width = ''; @Input() height = ''; } 这里值得一提的是，否则我们需要创建 svg 包装元素 Only void and foreign elements can be self-closed "rect" 作为 rect 元素只能存在于 svg-s 中。 正如此处所示，我们正在使用 appRemoveHost，这要归功于当我们的组件被渲染时， 包装器将被删除。 最后，在我们想要使用画布的地方，我们应该执行以下操作 <app-canvas> <app-custom-rect appRemoveHost [y]="'50'" [x]="'0'" [width]="'100'" [height]="'100'" [style]="'fill:red'" ></app-custom-rect> <app-canvas/> 这里我们再次需要使用 appRemoveHost 指令来删除 rect 组件的剩余包装。 在这里您可以找到工作 Stackblitz 是否可以注入作为子 svg 元素的动态组件？ 是的，当然。 Angular 已经支持这一点好几年了，但我不确定我是否已经看到了这一点的详细记录。 当你创建 Angular 组件时，你的选择器可以是很多东西。它不一定是一个标签。我们将利用这一点来使用属性。 首先，让我们构建托管 SVG 的主要组件： import { Component } from '@angular/core'; @Component({ selector: 'app-main', templateUrl: './main.component.html', styleUrls: ['./main.component.css'], }) export class MainComponent {} 和 HTML： <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <svg:g house></svg:g> </svg> 正如您可能已经猜到的，诀窍就在这里：<svg:g house></svg:g>。我们创建一个组，它不会渲染任何内容。但我们给它添加了一个属性house。 然后要在那里“注入”组件，我们可以让组件选择器以带有组的 svg 标签和 house 属性为目标： import { Component } from '@angular/core'; @Component({ selector: 'svg:g[house]', templateUrl: './house.component.html', styleUrls: ['./house.component.css'], }) export class HouseComponent {} 最后一块拼图几乎就是 SVG：要注入的部分 <svg:polygon points="25,10 40,30 10,30" style="fill:rgb(0,0,255);" /> <svg:rect width="30" height="30" x="10" y="30" style="fill:rgb(0,0,255);" /> 如果我们查看渲染的 HTML： <app-main _ngcontent-rcx-c227="" _nghost-rcx-c226="" ><svg _ngcontent-rcx-c226="" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > <g _ngcontent-rcx-c226="" house="" _nghost-rcx-c217=""> <polygon _ngcontent-rcx-c217="" points="25,10 40,30 10,30" style="fill: rgb(0,0,255);" ></polygon> <rect _ngcontent-rcx-c217="" width="30" height="30" x="10" y="30" style="fill: rgb(0,0,255);" ></rect> </g></svg ></app-main> 没有我们内部组件的任何痕迹。当然，您可以根据需要拥有任意数量和嵌套的数量。您还可以通过将数据作为输入传递来参数化它们，就像使用任何其他组件或注入服务一样。 这是 Stackblitz 上的 现场演示。 jscw 使用本机 JavaScript Web 组件可能会更容易 <svg-floorplan> 处理其innerHTML 并在shadowDOM中生成<SVG> 基于 HTMLUnknownElements <room>（打造出色的语义 HTML） 它声明了正确的 SVG 的 x,y,width,height,fill 属性 <rect> 基于 <rect> 标签可以定位在中间 innerHTML 中任何剩余的 SVG 元素都被移动到新的<SVG> 您的 JavaScript 技能可以增加更多... <svg-floorplan viewBox="0 0 300 100"> <style>text{fill:gold}</style> <room rect="0 0 200 50">living</room> <room rect="200 0 100 100 blue">kitchen</room> <room rect="0 50 100 50">bedroom</room> <room rect="100 50 100 50 green">bathroom</room> <circle fill="red" cx="25" cy="25" r="10"></circle> </svg-floorplan> 创造： <svg-floorplan viewBox="0 0 300 100"> <style>text{fill:gold}</style> <room rect="0 0 200 50">living</room> <room rect="200 0 100 100 blue">kitchen</room> <room rect="0 50 100 50">bedroom</room> <room rect="100 50 100 50 green">bathroom</room> <circle fill="red" cx="25" cy="25" r="10"></circle> </svg-floorplan> <script> customElements.define("svg-floorplan", class extends HTMLElement { connectedCallback() { setTimeout(() => { // make sure innerHTML is parsed let svg = `<svg viewBox="${this.getAttribute("viewBox")}">`; svg += `<rect x="0" y="0" width="100%" height="100%" fill="grey"/>`; this.querySelectorAll('room[rect]').forEach(rm => { let [x, y, width, height, fill="grey"] = rm.getAttribute("rect").split(" "); svg += `<rect x="${x}" y="${y}" width="${width}" height="${height}" stroke="black" fill="${fill}"/>`; let label = rm.innerHTML; svg += `<path id="${label}" pathLength="100" d="M${x} ${~~y+height/2}h${width}" stroke="none"></path> <text><textPath href="#${label}" startoffset="50" dominant-baseline="middle" text-anchor="middle">${label}</textPath></text>`; rm.remove(); }); svg += `</svg>`; this.attachShadow({mode:"open"}).innerHTML = svg; this.shadowRoot.querySelector("svg") .insertAdjacentHTML("beforeend",this.innerHTML) }) } }) </script> 文档可能会帮助您： 您可以在 Angular 应用程序中使用 SVG 文件作为模板。当您使用 SVG 作为模板时，您可以像使用 HTML 模板一样使用指令和绑定。使用这些功能动态生成交互式图形。 我建议你创建一个可以以 Angular 方式控制的 SVG 组件，对于动态模板显示，你可以做的是： <div class="container" *appCanvasAnchor> </div> .container { width: 400px; height: 400px; svg { width: 100%; height: 100%; } }