个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的 app.component.html :
<html>
<head></head>
<body>
<header *ngIf="loggedIn && showHeader"></header>
<router-outlet></router-outlet>
</body>
</html>
export class AppComponent {
constructor(private HeaderService: HeaderService, private AuthService: AuthService) { }
get loggedIn(): boolean { return this.AuthService.getUserState(); }
get showHeader(): boolean { return this.HeaderService.getToggleState(); }
}
@Injectable({
providedIn: 'root'
})
export class HeaderService {
showHeader = true;
constructor() { }
setToggleState(state: boolean) {
this.showHeader = state;
}
getToggleState() { return this.showHeader; }
}
login.component 中，标题应该是不可见的。
ExpressionChangedAfterItHasBeenCheckedError )。
showHeader至
false默认情况下？
export class LoginComponent implements OnInit {
ngOnInit() {
// To hide the header
this.HeaderService.setToggleState(false);
}
}
最佳答案
当您使用 *ngIf ，该元素不在 DOM 中(如果条件为 false )，将在运行时放入 DOM 中。
相反，您可以使用 [hidden]="<your condition>" ，因为即使条件是 false，您的元素也会出现在 DOM 中。 .如果那么您的条件更改为 true , 元素的 opacity将从 0 更改至 1 ，这使元素可见。
现在，为了获得更平滑的过渡，您可以像这样在 DOM 元素上放置一些 CSS:
.your-element {
transition: visibility 0.5s;
}
showHeader与
true .所以一开始就出现了，然后在服务初始化的时候突然消失了。
false在初始化。
关于html - 使用*ngIf时如何防止闪烁？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59842641/
25
4
0
这个问题是关于理解为什么一种技术比另一种更好。在 Angular 4/5 中，在模板中，您可以通过执行以下操作来实现相同的目的: 1) *ngIf-else 语法 content here
我的 *ngIf 在一个特定变量 isAdmin 上遇到了一个奇怪的问题(这应该允许我在 userList 中显示用户列表)。我不确定为什么它的行为与同一组件中的所有其他 *ngIf 语句不同。 这是
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
我有一个自定义选项卡实现，其中我使用一些 ngIf 指令显示选项卡内容，如下所示: 选项卡有自己的形式，一些内容应该只初始化一次，不能再初始化。在我当前的实现中，每次我更改条件然后更改选项卡时，组
我的问题涉及 *ngif 指令，一次 *ngif=true 我希望在我的“ModClass”指令执行其操作之前首先呈现 html 内容。 我尝试实现 ngOnInit 和 ngViewInit 但没有
基本上，我有一个带有 *ngIf 条件的 div，但我在这个 div 中也有一个 img。这是一个登录页面，我想为不同类型的用户显示不同的登录页面。这就是我使用 ngIf 的原因。但是，直到我单击用户
我正在使用 Angular 6。 我有一个如下所示的 html。 此处，showMenus 默认为 false，并在单击同一页面中的按钮时将其设置为 true。 现在，我试图在将 show
演示: https://stackblitz.com/angular/mxoemeygmlk?file=app%2Ftable-http-example.ts 解决这个 Angular 误差的最佳解决
我正在使用 AngularDart，我需要根据 bool 值 registerDisplay 显示和隐藏组件。尝试使用 *ngIf ，但抛出错误。以下是 html。 app_component.htm
在一个组件中，我有一个与此类似的源代码: {{row.job_id}} Job ID Not available 我想在单个 ng-template 中使用
直接来自 angular.io 的示例对我不起作用: {{show ? 'hide' : 'show'}} show = {{show}} Text to show Alternate text w
我的观察是否正确，即使 *ngIf 宿主元素不在 DOM 中，它也在内存/堆中。因此它正在创建宿主元素但不将其附加到 DOM。 我在上面是因为我有一个巨大的列表。每个列表元素中都有一些 *ngIfs。
我有一段这样的代码 ng-show="!edit{{id}} && imageUrl" 但这似乎行不通。在哪里 ng-show="!edit1 && imageUrl" 有效。语法有问题吗？？ 实际的
所以我试图更好地理解 Angulars ChangeDetection 并无意中遇到了一个问题: https://plnkr.co/edit/M8d6FhmDhGWIvSWNVpPm?p=previe
以下是一个 HTML 代码片段，其中 ngIf 检查 forceAngle 是否为真，默认情况下 forceAngle 为假。单击按钮后，我将调用 ForceAngles() 函数并将 forceAn
我有一个从多个地方调用的登录组件，并有一个输入将其显示为模态组件或只是普通组件。 登录组件: declare var jQuery: any; @Component({ selector: '
我正在使用 new Angular local variable assignment feature在 ngIf 下的子元素中引用异步管道的结果: 1"> There's more
我有一个 observable，我想在 ngIf 中创建一个变量，并且仅在值为 null 时返回 false(该 observable 返回一个数字) 我需要明确检查 null 因为我的 observ
我有一个组件 我只想显示是否设置了其属性之一。所以我想在做这样的事情: ... 事情是组件是在 HTML DOM 中创建的。所以，为了避免它的创建，我的假设是我应该把 * ngIf 在
当在 *ngIf 中使用 AsyncPipe 时，如果连接到 AsyncPipe 的 Observable 推送其*ngIf 变为真之前的值，从 AsyncPipe 返回的值将不正确。 例如，假设我有
我是一名优秀的程序员,十分优秀！