Web 应用程序在 app.dart 中有以下代码
library app;
import 'dart:html';
var _loginClass;
void main() {
_loginClass = 'hide_login'; //set style to hide login web component by setting display:none
}
void showLogin(e) {
_loginClass = 'show_login';
print("span clicked");
}
void hideLogin(e) {
_loginClass = 'hide_login';
}
从 App.dart 调用 hideLogin(e) 函数会隐藏 Web 组件。但从 Web 组件调用它不起作用。
css定义如下：
.hide_login {
display: none;
}
.show_login {
display = block;
}
使用它可能会更大胆
<template instantiate="bool expression">
这使得显示和隐藏像登录组件这样的自定义元素非常容易
例子：
登录.html
<html>
<body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template instantiate="if showLogin">
...
<button on-click="validateLogin()">Login</button>
</template>
</element>
</body>
</html>
登录组件.dart
import "package:web_ui/web_ui.dart";
class LoginComponent extends WebComponent {
bool showLogin = true;
bool validateLogin() {
...
showLogin = false;
}
}
查看http://www.dartlang.org/articles/dart-web-components/了解更多详情
奇怪的是你有“显示：无；” 和“显示=块；”。第二个不是有效的语法。
如果这不是正确答案，请尝试添加：
import 'package:web_components/web_components.dart';
然后调用 dispatch(); 设置_loginClass 后。