首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Dart中,Angular2 3.x要求AppComponent有一个getter 'toggled‘

在Dart中,Angular2 3.x要求AppComponent有一个名为'toggled'的getter。

在Angular中,AppComponent是一个根组件,它是Angular应用的入口点。它负责管理应用的整体状态和逻辑。'toggled'是一个getter,它可以用来获取一个布尔值,表示组件的某个状态是否被切换。

在Dart中,getter是一种特殊的方法,用于获取对象的属性值。它的语法类似于方法,但没有参数列表。在AppComponent中,我们可以定义一个名为'toggled'的getter,用于获取组件的切换状态。

以下是一个示例代码:

代码语言:dart
复制
class AppComponent {
  bool _isToggled = false;

  bool get toggled => _isToggled;

  void toggle() {
    _isToggled = !_isToggled;
  }
}

在上面的代码中,AppComponent定义了一个私有变量'_isToggled',并通过getter 'toggled'来获取它的值。在组件中,我们可以通过调用toggle()方法来切换'_isToggled'的值。

关于Dart和Angular2 3.x的更多信息,您可以参考以下链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

开始使用-安装 顶

应用程序可能有多个注入器.Angular应用程序是一个组件树.每一个组件实例它自己的注入器.组件树与注入器树相平行. 组件的注入器可能是组件树更高层级的祖先注入器的一个代理 ....顶层是若干子组件的AppComponent. 其中一个是HeroesListComponent....除非你充分的理由,否则你不应该这样做。但是你可以。 随着解决方案逻辑向上发展,第一个提供商遇到了胜利。 因此,中间注射器的提供者从树较低的东西拦截对服务的请求。...这不仅发生在想象以致提供服务的AppComponent将产生风险....一种可能的假设HeroTaxReturnComponent管理和恢复更改的逻辑. 那对于一个简单的英雄税单来说是非常棒的.真实世界, 使用了详尽的税单数据模型, 编辑将会很棘手.

75310
  • AngularDart4.0 英雄之旅-教程-05多组件 顶

    AppComponent正在做所有的事情。 一开始,它展示了一个英雄的细节。 然后,它成为一个英雄和英雄细节列表的主/细节形式。 很快就会有新的要求和能力。...CSS选择器名称hero-detail将与父组件的模板中标识该组件的元素标签相匹配。 本教程页面结尾处,您将向AppComponent模板添加一个元素。...HeroDetailComponent一个英雄,而不是一个选定的英雄。 模板的任何地方用单词“hero”替换“selectedHero”。...AppComponent模板的底部附近添加一个元素,英雄细节视图。...您可以将HeroDetailComponent演变成一个丰富的英雄编辑器,而无需触摸父AppComponent。 你可以不触及英雄详情视图的情况下演化AppComponent

    1.8K10

    AngularDart4.0 高级-层级依赖注入器 顶

    应用程序可能有多个注入器.Angular应用程序是一个组件树.每一个组件实例它自己的注入器.组件树与注入器树相平行. 组件的注入器可能是组件树更高层级的祖先注入器的一个代理 ....顶层是若干子组件的AppComponent. 其中一个是HeroesListComponent....除非你充分的理由,否则你不应该这样做。但是你可以。 随着解决方案逻辑向上发展,第一个提供商遇到了胜利。 因此,中间注射器的提供者从树较低的东西拦截对服务的请求。...这不仅发生在想象以致提供服务的AppComponent将产生风险....一种可能的假设HeroTaxReturnComponent管理和恢复更改的逻辑. 那对于一个简单的英雄税单来说是非常棒的.真实世界, 使用了详尽的税单数据模型, 编辑将会很棘手.

    85310

    AngularDart4.0 高级-属性(Attribute)指令 顶

    例如,“模板语法”页面的内置NgStyle指令可以同时更改多个元素样式。 属性指令两种: 基于类:一个全功能的属性指令,使用类实现。 功能化:无状态属性指令,使用顶层函数实现。... 现在在AppComponent引用此模板,并将Highlight指令添加到指令列表。 当Angular模板遇到myHighlight时,就会识别该指令。...处理程序委托给一个帮助器方法,该方法设置DOM元素_el的颜色,构造函数声明并初始化它。...本节,您将把AppComponent转换为一个线束,让您用单选按钮选取高亮颜色,并将您的颜色选择绑定到指令。...绑定到第二个属性 这个highlight指令一个可定制的属性。 一个真正的应用程序,它可能需要更多。 目前,默认的颜色 - 直到用户选择高亮颜色为止的颜色 - 被硬编码为“red”。

    3.2K10

    AngularDart4.0 指南- 显示数据 顶

    您可以通过将HTML模板的控件绑定到Angular组件的属性来显示数据。 在这个页面,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地列表下方显示一条消息。... 当您使用AppComponent类(web / main.dart)引导时,Angular将在index.html查找,查找它,实例化AppComponent...注意ngFor指令的hero变量; 它是模板输入变量的一个例子。 “模板语法”页面的microsyntax部分阅读有关模板输入变量的更多信息。...现在英雄出现在一个无序的列表。 ? 为数据创建一个类 应用程序的代码直接在组件内定义数据,这不是最佳实践。 但是,一个简单的演示,没关系。 目前,绑定是一个字符串列表。...使用下面的代码名为lib的文件夹创建一个hero.dart新文件:lib/src/hero.dart class Hero { final int id; String name; Hero

    5.3K10

    AngularDart4.0 英雄之旅-教程-03英雄编辑器

    显示英雄 向AppComponent添加两个属性:一个title属性代表应用程序名,一个hero属性代表英雄名 lib/app_component.dart (AppComponent class) class...创建一个具有id和name属性的Hero类。 app_component.dart文件的顶部附近添加这些属性,就在import语句的下面(如果有的话)。...); } AppComponent,将组件的英雄属性重构为Hero类型,然后将其id初始化为1,name为Windstorm。...数据两个方向流动:从属性到文本框,从文本框返回到属性。 表单和模板语法页面阅读有关ngModel的更多信息。 @Component(指令:...)...模板中使用任何Angular指令之前,需要在组件的@Component注解的指令参数列出它们。

    3.2K10

    AngularDart4.0 指南- 依赖注入 顶

    () class HeroService { List getHeroes() => mockHeroes; } 构造函数要求注入Logger的实例,并将其存储一个名为logger的专用字段...(HeroListComponent -> HeroService -> Logger) 由于单实例日志服务应用程序随处可见,因此它已在AppComponent中注册:lib/app_component.dart...也许信息浏览器会话过程反复改变。 还假设注射服务没有独立访问这些信息的来源。 这种情况要求工厂提供商。...注入器维护一个内部的令牌提供者映射,当它被要求依赖的时候它会引用它。 令牌是map的key。 之前的所有例子,依赖性值都是一个类实例,类类型作为自己的查找键。...AppComponent(@Inject(appConfigToken) Map config) : title = config['title']; 虽然Map接口依赖注入不起作用,但它支持输入配置对象

    5.7K20

    干货 | 前端阶段性总结之「框架相关」那些事

    不只是Angular1到Angular2的重新设计,甚至是Angular2自身的更新也不全兼容。但不得不说,虽然对用户不是非常友好,其实仔细品味的话,Angular很多很棒的理念和设计的。...另外一个就是,Vue的话html+js+css是写在一个文件,封装成组件的,这对于有些目录组织管理不好的人来说,可能还比较方便的哈哈。...数据跟踪 Vue2:增加虚拟DOM(听说的,未经验证) 使用场景 移动端:由于性能问题,Angular移动端的推荐为0,React/Vue感觉还可以 PC端:Angular开发效率会好些,React对团队要求...路由 路由现在也成为了前端框架里一个最基本的要求了呢。毕竟这是个很简单的部件,但是却是单页应用不可或缺的部分。...因为现在其实不只是前端吧,各个层面都是不断地进行革命,不如学会在骄躁脚踏实步吧。 文章来源:腾讯工程师 王贝珊

    95520

    Webpack实战-构建同构应用

    认识同构应用 现在大多数单页应用的视图都是通过 JavaScript代码浏览器端渲染出来的,但在浏览器端渲染的坏处: 搜索引擎无法收录你的网页,因为展示出的数据都是浏览器端异步渲染出来的,大部分爬虫无法获取到这些数据...为了解决以上问题,有人提出能否将原本只运行在浏览器的 JavaScript渲染代码也服务器端运行,服务器端渲染出带内容的 HTML 后再返回。...实际上现在主流的前端框架都支持同构,包括 React、Vue2、Angular2,其中最先支持也是最成熟的同构方案是 React。...构建同构应用的最终目的是从一份项目源码构建出2份 JavaScript代码,一份用于浏览器端运行,一份用于 Node.js 环境运行渲染出 HTML。...需要通过 CommonJS 规范导出一个渲染函数,以用于 HTTP 服务器中去执行这个渲染函数,渲染出 HTML 内容返回。

    96610

    AngularDart4.0 英雄之旅-教程-04明细 顶

    展示英雄们     显示一个英雄列表,首先需要将英雄们添加到视图模板 模拟英雄     lib / src下的以下文件创建十个英雄的列表:lib/src/mock_heroes.dart import...应用hero字段 将hero字段替换为AppComponent的公共heros字段,并使用模拟英雄进行初始化(不要忘记导入):lib/app_component.dart (heroes) import...'src/mock_heroes.dart'; // ··· class AppComponent { final title = 'Tour of Heroes'; List...onSelect(hero)表达式调用AppComponent方法onSelect(),传递模板输入变量hero作为参数。 这是你ngFor指令定义的同一个英雄变量。...在上面添加的样式元数据一个名为selected的自定义CSS类。 为了让选定的英雄更清晰可见,当用户点击英雄名字时,你将把这个选定的class应用到。

    3K30

    Webpack实战-构建同构应用

    认识同构应用 现在大多数单页应用的视图都是通过 JavaScript代码浏览器端渲染出来的,但在浏览器端渲染的坏处: 搜索引擎无法收录你的网页,因为展示出的数据都是浏览器端异步渲染出来的,大部分爬虫无法获取到这些数据...为了解决以上问题,有人提出能否将原本只运行在浏览器的 JavaScript渲染代码也服务器端运行,服务器端渲染出带内容的 HTML 后再返回。...实际上现在主流的前端框架都支持同构,包括 React、Vue2、Angular2,其中最先支持也是最成熟的同构方案是 React。...构建同构应用的最终目的是从一份项目源码构建出2份 JavaScript代码,一份用于浏览器端运行,一份用于 Node.js 环境运行渲染出 HTML。...需要通过 CommonJS 规范导出一个渲染函数,以用于 HTTP 服务器中去执行这个渲染函数,渲染出 HTML 内容返回。

    1.5K60

    angular基础面试题_java web面试题

    PercentPipe :把数字转换成百分比字符串,根据本地环境的规则进行格式化angualr angular路由配置: 路由配置 app.route.ts 路由跳转方式 [routerLink... ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用 ngOnInit: Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...,ngDoCheck之后 ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令的内容之后调用,ngAfter...之后调用 ngAfterViewInit:当...如果此次digest循环更新,那么会再次触发digest循环,直到所有的watch都没有更新为止。 使用Angular 2,和使用Angular 1相比,什么优势?...灵活的路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 Angular 2应用,我们应该注意哪些安全威胁?

    13K50
    领券