Question

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;
}

Answer 1

你有“display：none;”这很奇怪和“display = block;”。第二个是无效的语法。

如果这不是正确的答案，请尝试添加：

import 'package:web_components/web_components.dart';

然后调用dispatch（）;在设置_loginClass。

之后

Answer 2

使用

可能会更加狡猾

<template instantiate="bool expression">

这使得显示和隐藏自定义元素（如登录组件）非常容易

示例：

的login.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>

LoginComponent.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/了解更多详情

从dart webcomponent调用库中定义的函数

2 个答案: