angular 相关问题

关于Angular的问题（不要与AngularJS混淆），来自Google的Web框架。将此标记用于Angular问题，这些问题并非特定于单个版本。对于较旧的AngularJS（1.x）Web框架，请使用angularjs标记。

使用ag-grid为cellRendererFramework传递多个值？

我只看到了一个与此相关的问题，并且没有发布答案。我有一个角度应用程序 usnig ag-grid。它使用 cellRendererFramework 渲染 a 列的数据以显示在...

angular ag-grid ag-grid-angular

回答 3 投票 0

如何将http上下文附加到角度翻译模块发送的请求

我正在使用 Angular 17 并实现了，我现在需要向翻译模块发送的每个请求添加一个 HttpContext 对象，以便我的拦截器可以确定它不必考虑...

angular typescript

回答 1 投票 0

特定项目的角度页面过渡动画

我想做路线过渡，但不是简单的滑出/滑入动画。我正在寻找像左边这个这样的动画。我知道如何制作将重绘整个内容的路线动画......

angular angular-routing angular-router angular-animations angular-transitions

回答 1 投票 0

Angular - 使用电话指令将值粘贴到控件以格式化值时，验证器不起作用

我们在项目中使用 Angular 17 和响应式表单。我们编写了一个自定义指令，将输出格式化为美国电话号码格式 111-222-3333。我们看到的是，当

angular typescript angular-reactive-forms angular-directive angular17

回答 1 投票 0

使用 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%; } }

angular svg angular5

回答 4 投票 0

如何在 Angular 中将行转换为列以及将列转换为行

只需要您的帮助和想法，了解如何以角度将行转换为列，将列转换为行。 [ {“playerId”：“1001”，“playerName”：“勒布朗·詹姆斯”，“游戏&...

angular

回答 1 投票 0

复制时带有验证器的 Angular Phone 指令不起作用

我们在项目中使用 Angular 17 和响应式表单。我们编写了一个自定义指令，将输出格式化为美国电话号码格式 111-222-3333。我们看到的是，当

angular angular-reactive-forms

回答 1 投票 0

为什么我在 nginx 上托管的 Angular 应用程序无法工作？

我一直在尝试使用 Docker 在 NGINX 上托管 Angular 应用程序，但是当我构建容器并转到 localhost:8080 时，我收到 502 Bad Gateway 错误。这是我的 Dockerfile： FROM 节点：最新版本