本周我们RxJS运营商skipWhile。这个操作符将忽略值发出一个可见只要给定条件是正确的。
它的大理石图是这样的:
上面的例子告诉我们,只要排放值小于5,他们跳过。
日常用例是什么skipWhile吗?这里是一个例子,我想等待用户输入至少两个字符在一个表单输入在我们开始之前过滤(除了上周的startWith例子):
这样,过滤器美元可观测的开始只有当源排放值FormControl价值有至少两个字符的长度,导致以下行为:
这可以用于延迟查询与HTTP服务器端API开始过滤只有一次我们有足够的有意义的数据。这是有点类似于还可以做什么debounceTime操作符。
你可以看到完整的例子在Stackblitz。
昨天,我们谈到了如何改变角的地区应用。下一步是完全国际化我们应用程序的所有文本翻译成不同的语言。
而角有其本地化的实现国际化应用程序中,最受欢迎的库用于这样一个任务ngx-translate。
为什么不使用角的内部实现呢?主要原因是角每地区构建您的应用程序的一个版本。结果,如果你必须支持20个不同的地区,你的角度构建将输出20个不同的应用程序。这意味着改变网站会导致重新加载完整的应用程序。这也意味着改变翻译需要一个完整的重建和重新部署应用程序。
ngx-translate更灵活,因为它依赖于管道、指令和服务翻译文本在运行时,而不是构建时。下面是一些例子:
与TranslateService:
与TranslatePipe:
与TranslateDirective:
翻译来自特定的文件翻译键(“你好”在我的示例中)被映射到实际值在每个语言。ngx-translate支持不同格式的(如JSON和阿宝)。
这是英文翻译存储在的一个例子en.json:
和同样的法语翻译fr.json:
我们要做的表明在翻译文件和ngx-translate基于区域设置将根据需要下载它们。
定义的语言支持,以及哪一个使用默认都可以完成了TranslateService从图书馆:
你可以看到一个生活的例子ngx-translate在Stackblitz这里。如果你想尝试它,你可以用我的ngx-translate循序渐进教程。
语言环境是一个国家和语言的组合,如fr - ca法国在加拿大或口语en - us在美国英语口语。地区想创建一个应用程序时,所有在世界各地工作。
例如,我们来看下面的句子在美式英语:
04/01/2023,这种产品的价格是2056 .23美元
相同的句子在法国法国将是:
Le 01/04/2023 Le prix de cet(中央东部东京)是2条056年23€
正如你所看到的,一切都是不同的。货币、数字格式、日期格式,当然,语言。知道所有的这些地区之间的差异是一个复杂的任务。幸运的是,角知道大多数地区,和所有管道和格式化功能使用该语言环境正确格式化日期/数字/货币。
支持不同的地区,我们都必须进口的main.ts:
然后您可以配置您的提供者设置一个默认的LOCALE_ID:
就这样,表达式{{2056.23号|}}将会显示 056,23岁而不是2056 .23(代码例子)。所以我们的管道将使用缺省语言环境。
打印稿是优秀的类型安全,因为它阻止我们犯错误的时候宣布新对象。也就是说,一个对象有时是由聚合来自不同数据源的数据(不同的API调用,例如)。
例如,说我们有以下接口:
我们要创建的实例问题对象,但假设创建该对象需要几个步骤。在第一步中,我检索数据的问题本身,在第二步,我必须检索选项列表中。
起初,我的问题对象看起来像这样:
但这段代码不能编译,因为myQuestion是错过了选项财产。选项我们可以指定一个空数组,或者我们可以使它可选接口中使用这种语法:选择吗?:Option[];
然而,这一切似乎作弊。相反,我们可以使用部分实用程序类型表明我们的目标是在一个临时状态:
上面的代码编译器满意;我们不需要改变我们的接口。
myQuestion现在是一个对象实现的一个子集问题接口,所有属性标记为可选的。
打印稿有几个实用程序类就像部分。我将介绍更多的即将到来的时事通讯。
startWith是一个运营商,做了一些简单:需要现有的可观察到的和使它立即发出一个默认值。
它的大理石图是这样的:
日常用例是什么startWith吗?这里是一个例子,我想显示加载程序,数据正在加载从服务:
的加载属性用于决定何时显示/隐藏一个加载程序。这个观察到的第一次发射{数据:null,加载:真}然后实际数据加载:假。
你可以看到完整的例子在Stackblitz(我有乐趣与打印稿异步管泛型,在这个示例中,)。
在本教程是一个更复杂的例子动态过滤RxJs和角形式。我将描述如何创建一个文本输入用于过滤列表的状态如下:
我们需要startWith在这种情况下开始前的过滤功能用户输入任何文本输入。这是一种最常见的用例startWith操作符。
使用角路由器是一个最好的方法来模拟多个页面/屏幕在一个角的应用程序。然而,我们有时可能会需要更多的灵活性,相当于“子页面”,兄弟元素在网页上可以显示动态内容基于当前URL。
这样的三个不同的地方div可以显示不同的组件没有父/子关系:
角允许我们指定路由器网点支持这样的场景。我们可以定义几个兄弟媒体给他们独特的名字一样:
然后,在我们的路由器配置,我们可以定义哪些组件是在出口的路径:
最后,当路由组件一个出口,我们必须重复一些配置的形式,而冗长的命令:
上面的代码将加载两个不同的组件在两个不同的名字。你可以看到一个生活在Stackblitz示例。
在我们进入今天的主题:角团队的注释请求(RFC)角信号现在是向公众开放。随意看一下并给你反馈。
昨天,我们看到如何改变应用程序的标题使用路由器配置。今天,让我们先了解更复杂的场景当我们需要一个动态标题设置取决于其他因素。
首先,我们使用一个函数可能需要一些处理从服务或API来提取信息。在这种情况下,我们可以使用一个解析器函数,得到数据并返回:
请注意,函数的签名让我们返回字符串,一个可观测的,或者一个承诺。这样,我们可以做一个API请求获取一些额外的数据。例如,在上面的例子中,getUsername()返回一个可观测(代码)。这是另一个使用的很好的例子注入我们前面介绍的通讯功能。
对于更复杂的场景中,角允许我们创建一个定制的TitleStrategy。这种战略需要的服务的形式来实现的updateTitle方法:
这里是一个例子,我添加一个前缀标题,然后使用默认的标题的标题属性在路由器配置。注意,我们可以很容易地注入其他服务和执行异步操作之前,如果需要设置新头衔:
这样标题战略提供服务作为默认标题策略在我们依赖注入的配置如下:
你可以看到,的例子在Stackblitz行动。
这是一个快速发布展示最近的一个有用的框架和实现起来非常简单。我们现在可以有一个标题属性在每个路由配置:
提供的标题设置为页面标题(在浏览器选项卡),当用户从一个页面导航到另一个。就像这样:
你可以看到一个在Stackblitz代码示例与一个活的版本在这里。我与新独立的组件使用provideRouter函数只是为了消遣:
注意,还有一个标题可以使用服务,如果你需要动态地改变这一头衔。这是我的一个简短的教程,主题:如何改变网页标题和元标记角吗?