使用ng new
创建一个简单的Angular应用。然后使用以下内容创建src/test.component.ts
:
import {Component} from "@angular/core";
@Component({
selector: "test",
template: `<ng-content *ngIf="false"></ng-content>`
})
export class TestComponent {}
将其添加到src/app.module.ts
并更新您的src/app.component.html
文件以使用此新组件(请注意,我将img src修改为指向网络映像,而不是base64编码的映像):
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<test>
<img width="300" alt="Angular Logo" src="https://duckduckgo.com/assets/logo_homepage.normal.v107.svg">
</test>
</div>
运行该应用程序时,您应该没有在屏幕上看到图像,但是如果您在网络下打开开发人员工具,仍然会看到图像网络请求。
即使DOM没有<img>
标签,为什么也要加载此图像?我该如何避免这种情况发生,或者这是一个错误?
我认为此行为很奇怪的原因是,如果跳过带有自定义组件的<ng-content>
,然后对<ng-container>
和<div>
进行常规*ngIf="false"
或@RequestMapping
图片中,直到显示内容,您都不会收到任何网络请求。
您可以访问完整的源代码here。