小编Jon*_*Sud的帖子

如何像 vue 那样简单地在 Angular 中的动态组件中渲染？

例如，在 vue 中，要渲染动态组件，我编写：

<component v-bind:is="'componentX'"></component> 

角度相当于什么？

我有六个 div A - F。

我很难通过响应方式来做 css grid 来匹配这个标准：

1. 无论如何，所有 div 都应该具有相同的宽度。

2. C 到 DI 之间需要做空间，同时扩展窗口屏幕时它的增长。（向右推 DF）。就像上图一样

3. 当我缩小容器 div DF 应该在顶部并且具有相同的宽度 div。就像这张图片：

到目前为止，我的代码是：

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
</div>

.container {

  background-color: #ddd;

  display: grid;

  /*grid-template-rows: repeat(2, minmax(150px, min-content));*/
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  /* grid-auto-rows: 150px;*/

  .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered; 

    &--1 { background-color: orangered; }
    &--2 { …

我有 vuetify 应用程序，单击后打开一个对话框。在对话框内我有Foo组件。

当我关闭对话框时，组件destroy上的事件Foo不会触发。

如何destory在Foo组件中触发？我可以通过 vuetify 方式做到这一点吗？

const Foo = {
  template: `
    <div>im fooo!!! <v-text-field :value="bar"></v-text-field></div>
  `,
  data () {
    return {
      bar: '',
    }
  },
  mounted: function() {
    console.log('mounted')
  },
  destroyed() {
    console.log('destroyed');
  }
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  components: {
    Foo  
  },
  methods: {
    open: function() {
      this.dialog = true;
    }
  },
  data () {
    return {
      dialog: false,
    }
  },
})

<link rel="stylesheet" …

当我尝试获取元标记的内容时出现错误：

document.getElementById('mymetatag').content

在 Javascript 中是有效的，但打字稿说

Property 'content' does not exist on type 'HTMLElement'

那么如何扩展HTMLElement类型接口来支持content属性呢？

我想在 aws ecs 中创建一个任务定义。

在conatiner中运行nginx需要多少内存和CPU？和另一个容器中的nodejs？

nginx - 只是一个从 80 到 3000 的代理。

nodejs - 调用 atlas mongodb 的简单服务

ngOnInit在角度中，是否可以为每个组件挂钩事件？

例如，我想console.log('im on ngOnInit');在应用程序的每个组件中执行 , ，并且我不想打开每个组件并将其写入代码中。

可以做这样或类似的事情吗？

主要.ts

 import { component } from '@angular...';
 
 component.hook('ngOnInit', (cmp) => { console.log('im on ngOnInit'); });

我有产品服务，我想从州获得最好的产品。

我可以实现此目的的一种方法是使用rxjs如下所示：

 @Injectable({ providedIn: 'root' })
 export class ProductDataService extends EntityCollectionServiceBase<Product> {
  
    bestProductsIds$ = new BehaviorSubject([]);

    bestProducts$ = combineLatest([this.entities$, this.bestProductsIds$]).pipe(
      map(([products, ids]) => products.filter((p) => ids.includes(p.id))),
      map((products) => orderBy(product, ['createdDate', ['desc']])),
      map((products) => this.toProductCard(products))
    );
}

另一种方法是使用选择器：

export const selectBestProducts = createSelector(
  ([products, ids]) => products.filter((p) => ids.includes(p.id)),
  (products) => orderBy(products, ['createdDate', ['desc']])
);


@Injectable({ providedIn: 'root' })
export class ProductDataService extends EntityCollectionServiceBase<Product> {

  bestProductsIds$ = new BehaviorSubject([]);

  bestProducts$ = combineLatest([this.entities$, this.bestProductsIds$]).pipe(select(selectBestProducts));

  ...
}

我知道 ngrx 选择器是记忆函数，但我在这里使用combineLatest …

我是第一次使用 openfaas。我按照本指南进行了操作。

cli 创建handler.js文件。

是否可以使用打字稿？创建 typescript 文件而不是 javascript 文件？

我用来Joi根据模式验证我的输入。

如何访问函数foo内部的值custom？

Codesandbox.io

import * as Joi from "joi";

console.clear();

const schema = Joi.object({
  bar: Joi.string().custom((x) => {
    // how to access foo value?

    console.log({ x });
  }),
  foo: Joi.string()
});

schema
  .validateAsync({ foo: "myfoo", bar: "mybar" })
  .then((x) => {
    console.log({ x });
  })
  .catch((err) => {
    console.log({ err });
  });

为什么我无法获取 Angular 中的 css 变量内容？

我在 style.css 中添加变量如下：

:root {
  --foo: "string";
}

getPropertyValue并尝试通过app.component获取值：

 ngOnInit() {
    const y = document.body.parentElement.style.getPropertyValue('--foo');
    console.log({ y }); // logs: "".
  }

Codesandbox.io

我使用的是 Chrome 最新版本。