Chris Barr's questions

当元素卡住时，我需要为其应用 CSS 类position:sticky。当我使用顶部位置时，这个方法可以正常工作，但我无法确定底部位置的 CSS 类。我想我需要在某个地方考虑​​高度，但我不知道这里最好的做法是什么。

我还需要它与偏移配合使用，只需顶部或底部的位置即可0。这是我目前所拥有的

const stickyElements = [...document.querySelectorAll(".sticky")];
window.addEventListener("scroll", () => {
  stickyElements.forEach((el) => toggleClassIfStuck(el))
});
window.dispatchEvent(new Event('scroll')); //trigger initially

function toggleClassIfStuck(el){
  const computedStyles = getComputedStyle(el);

  if (this.canBeStuck(computedStyles)) {
    const hasTopPositionSet = computedStyles.top !== 'auto';
    const hasBottomPositionSet = computedStyles.bottom !== 'auto';

    if (hasTopPositionSet || hasBottomPositionSet) {
      el.classList.toggle('is-stuck', this.isStuck(el, computedStyles, hasBottomPositionSet))
    }
  }
}

function canBeStuck(computedStyles) {
  return computedStyles.display !== 'none' && computedStyles.position === 'sticky';
}

function isStuck(el, computedStyles, shouldUseBottomPosition) {
  const offsetParent = el.offsetParent; //the element which this element is relatively sticky to
  const rect = el.getBoundingClientRect();
  const parentRect = offsetParent.getBoundingClientRect();

  if (shouldUseBottomPosition) {
    //this isn't correct, but not sure what to check here!
    const elBottom = parseInt(computedStyles.bottom, 10);
    return rect.top - rect.bottom === elBottom;
  } else {
    const elTop = parseInt(computedStyles.top,10);
    return rect.top === elTop;
  }
}

.sticky               {
  position:sticky;
  background: #EEE;
  padding: .5rem;
  border: 1px solid #DDD;
  transition: all 200ms;
}
.sticky-top           { top:0; }
.sticky-top-offset    { top: 1rem;}
.sticky-bottom        { bottom: 0; }
.sticky-bottom-offset { bottom: 1rem; }

.is-stuck{
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  background: lightskyblue;
}

main{ display: flex; gap:.5rem;}
section{ height:120vh; width: 40%; }

<main>
  <section>
    <br>
    
    <div id="one" class="sticky sticky-top">Top</div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    
    <div class="sticky sticky-bottom">Bottom</div>
    
    <br>
  </section>
  
  <section>
    <br><br><br><br>
    
    <div class="sticky sticky-top-offset">Top with offset</div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    
    <div class="sticky sticky-bottom-offset">Bottom with offset</div>
    
    <br><br><br><br>
  </section>
</main>

我有一个 Angular 18 组件，它接收一个可观察对象，我使用管道将其呈现在页面上async。我希望能够修改此组件内的数据，然后按“保存”按钮。

在按下“保存”按钮之前，如何编辑此组件内的值？我对使用异步管道还有些陌生，通常我只会在组件内订阅，但我试图坚持最佳实践并避免在可能的情况下订阅，而是让异步管道来处理这个问题。

以下是我正在做的事情

export class TimesheetSelectedDayComponent {
  private readonly activatedRoute = inject(ActivatedRoute);
  private readonly timesheetService = inject(TimesheetService);

  //whenever the route params OR the selected timesheet changes...
  selectedDay$ = combineLatest({
    params$: this.activatedRoute.paramMap,
    timesheet$: this.timesheetService.selectedTimesheet$,
  }).pipe(
    switchMap((results) =>
      //now get the matching day from the timesheet
      of(results.timesheet$?.days.find((d) => d.date.dayOfWeek === results.params$.get('dayOfWeek'))),
    ),
  );

  addAbsence(absence: ITimesheetAbsence): void {
    //How do I add this to the selectedDay.absences array?
  }

  removeAbsence(absenceTimeEntity: ITimesheetAbsence): void {
    //How do I remove this from the selectedDay.absences array?
  }
}

@if (selectedDay$ | async; as selectedDay) {
  <h5 class="card-header">{{ selectedDay.date }}</h5>
  <div class="card-body">
    <ul class="list-group">
        <li class="list-group-item">
          <app-time-entity-editor name="Work Day" [timeEntityObject]="selectedDay.workDay" />
        </li>
        <li class="list-group-item">
          <app-time-entity-editor name="Lunch" [timeEntityObject]="selectedDay.lunch" />
        </li>
        @for (absence of selectedDay.absences; track $index) {
          <li class="list-group-item">
            <app-time-entity-editor
              isRemovable="true"
              [name]="absence.name"
              [timeEntityObject]="absence"
              (removeClick)="removeAbsence($event)"
            />
          </li>
        }
      </ul>

      <app-absence-selector class="d-block mt-2" (selectAbsence)="addAbsence($event)" />
    </div>

    <button type="button" class="btn btn-outline-success btn-lg">Save</button>
  </div>
} @else {
  <h5 class="card-header">&nbsp;</h5>
  <div class="card-body">
    <app-spinner />
  </div>
}

基本上，我希望能够在保存更改之前对组件中的数据进行更改，并使可观察对象在订阅的其他区域中做出反应

我想在异步加载 Angular 路由配置时显示一个加载器，但有时这些加载器可以非常快，而加载器只会在屏幕上闪烁一瞬间。

我希望仅在加载器在一段时间后仍未完成加载时才显示加载器。我首先想到的是使用delay(250)。当使用所需的配置导航到该页面时，这种方法有效，但如果我刷新该页面，加载器似乎总是会在屏幕上短暂闪烁

这是我现在正在做的事情

private isLoadingRouteConfig = false;

readonly isLoadingRouteConfig$ = this.router.events.pipe(
  delay(250), //if the config loads very quickly, don't even show this
  map((ev) => {
    if (ev instanceof RouteConfigLoadStart) {
      this.isLoadingRouteConfig = true;
    } else if (ev instanceof RouteConfigLoadEnd) {
      this.isLoadingRouteConfig = false;
    }
    return this.isLoadingRouteConfig;
  }),
);

@if (isLoadingRouteConfig$ | async) {
  <app-loader />
}

我怎样才能让它按预期工作？我想在 250 毫秒后显示加载器，但如果已经完成加载，则跳过此步骤。

我被委托设计一个网站，在背景中使用这种图案

我认为 SVG 图案非常适合这种用途。我可以制作这些形状的单独一列，但我不确定是否可以用其他方式生成更好的形状。我的做法感觉不对而且效率低下，而且它无法扩展到整个屏幕作为背景图像。

svg {
  border: 1px solid #CCC;
}

svg * { 
  transform-box: fill-box;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="780" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="hex" fill="#D4C1DE" fill-opacity="0.3" d="M0 25.980762113533157L15 0L45 0L60 25.980762113533157L45 51.96152422706631L15 51.96152422706631Z">
  </defs>
  
    <use xlink:href="#hex" transform-origin="center" x="0" y="0"   transform="scale(0.20)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="400" transform="scale(0.30)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="450" transform="scale(0.40)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="500" transform="scale(0.50)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="550" transform="scale(0.60)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="600" transform="scale(0.70)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="650" transform="scale(0.80)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="700" transform="scale(0.90)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="730" />
</svg>

有什么更实用的方法可以实现此处预期的效果？

在使用 Liquid 模板的 Eleventy 站点中，我通常可以使用url这样的过滤器获得完整/绝对 URL{{'/books/' | url}}

当我循环数据时，我需要使用slugify过滤器将该数据转换为可用的 URL，如下所示：/books/{{book.title | slugify}}

这可行，但我得到的 URL 不是绝对的。我怎样才能让两者同时发生？我已经尝试过以下方法：

• {{'/books/' {% book.title | slugify %} | url}}
• {{'/books/' {{ book.title | slugify }} | url}}
• {{'/books/'book.title | slugify | url}}

我似乎找不到任何有关使用这样的多个过滤器的文档。

我有一个包含多个应用程序（Angular 和 NestJS）的 monorepo，它们共享一些东西，例如接口、枚举等。这些应用程序可以工作，并且 Angular 应用程序的 Jasmine 测试也可以工作，但是我在 NestJS 应用程序中的 Jest 测试无法导入共享 monorepo 文件夹中的任何内容。

这是我的文件夹结构：

my-repo/
├── ng-ui-1/
├── ng-ui-2/
├── nest-api/
│   ├── src/ (folder w/ app code)
│   ├── tsconfig.json
│   ├── tsconfig.build.json
│   ├── (etc...)
├── monorepo-shared/
│   ├── enums/
│   │   ├── *.enum.ts files
│   ├── interfaces/
│   │   ├── *.interface.ts files

在所有打字稿应用程序中，我已将其添加到我的tsconfig.json文件中，并且效果很好

{
  "compilerOptions": {
    //...
    "paths": {
      "@monorepo-shared/constants": ["../monorepo-shared/constants/index"],
      "@monorepo-shared/enums":     ["../monorepo-shared/enums/index"],
      "@monorepo-shared/interfaces":["../monorepo-shared/interfaces/index"]
    }
  }
}

在 TS 文件中，我只需添加它即可从这些共享文件夹中导入某些内容，同样，除了 Jest 测试之外，这在任何地方都可以正常工作。

import { BrandingTypeEnum } from '@monorepo-shared/enums'; 

当我运行 Jest 测试时，出现此错误

Cannot find module '@monorepo-shared/enums' from 'account/account.controller.spec.ts'

在我的package.jsonI 中定义 Jest 设置。我知道我需要以某种方式将其指向事实，@monorepo-shared/enums因为由于某种原因它无法推断出这一点，但到目前为止我尝试过的一切都不正确。

"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "ts"
  ],
  "moduleDirectories": [
    "node_modules",
    "@monorepo-shared/constants",
    "@monorepo-shared/enums",
    "@monorepo-shared/interfaces",
  ],
  "rootDir": "src",
  "testRegex": ".*\\.spec\\.ts$",
  "transform": {
    "^.+\\.(t|j)s$": "ts-jest"
  },
  "collectCoverageFrom": [
    "**/*.(t|j)s"
  ],
  "coverageDirectory": "../coverage",
  "testEnvironment": "node"
},

我已经尝试了这个问题的许多解决方案，但到目前为止没有一个是正确的。我需要更改什么才能让 Jest 看到我在tsconfig.json文件中定义的这些路径？

我有一个 Angular 16 组件，它通过它所在的表单，并且允许viewProviders它工作，这是我收到的另一个问题的答案

@Component({
  selector: 'app-question-form-editor',
  standalone: true,
  imports: [ CommonModule, FormsModule ],
  templateUrl: './question-form-editor.component.html',
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
})
export class QuestionFormEditorComponent implements OnInit {
  @Input() form!: NgForm;
  
  //Logic goes here...
}

现在这可以按预期工作，但是现在我的单元测试中断了，因为他们需要这个提供程序，并且我不确定我需要提供什么值。

const mockQuestionForm = new NgForm([], []);
mockQuestionForm.form.addControl('example', new FormControl('', Validators.required));

describe('QuestionFormEditorComponent', () => {
  let component: QuestionFormEditorComponent;
  let fixture: ComponentFixture<QuestionFormEditorComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [QuestionFormEditorComponent],
      providers: [{ provide: ControlContainer, useValue: mockQuestionForm }],
    });
    fixture = TestBed.createComponent(QuestionFormEditorComponent);
    component = fixture.componentInstance;

    component.form = mockQuestionForm;
  });

  it('should create', () => {
    fixture.detectChanges(); //triggers ngOnInit()

    expect(component).toBeTruthy();
  });
});

我也尝试过useExisting，并且useValue尝试过，NgForm而不是我的mockQuestionForm- 都有相同的结果

这是 Jasmine 失败的错误消息

NullInjectorError: R3InjectorError(Standalone[QuestionFormEditorComponent])[NgForm -> NgForm -> NgForm]: 
  NullInjectorError: No provider for NgForm!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'NgForm', 'NgForm', 'NgForm' ] })
    at NullInjector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:8890:27)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:9334:33)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:9334:33)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:9334:33)
    at ChainedInjector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:14018:36)
    at lookupTokenUsingModuleInjector (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:4608:39)
    at getOrCreateInjectable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:4656:12)
    at ɵɵdirectiveInject (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:11801:19)
    at ɵɵinject (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:848:60)
    at NodeInjectorFactory.factory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:9556:29)

我正在解析一个二进制文件以提取文本内容。这是一个可以在 Node 环境或 Web 浏览器中运行的库。我需要将所有字符转换为人类可读的编码版本。所以我收到一个示例字符串，例如

'Señor and salvación and Number%3A 1234%3B %06%88'

我希望输出是

'Señor and salvación and Number: 1234; ♠'

目前我正在使用解码和转义字符串的混合，使用我在另一个 SO 问题上找到的函数。我完全同意扔掉它，转而选择其他效果更好的东西。我知道我所做的根本不理想，但我不确定我需要做什么才能使这项工作正常进行。下面的示例显示了该函数以及获得最终输出的步骤，该输出接近但并不完美。

另一个问题是，使用decodeURIComponent有时会抛出URIError: URI malformed错误，具体取决于我给它的输入类型

function escapeString(str) {
  //A replacement for the deprecated escape method
  //https://stackoverflow.com/a/37303214/79677
  const allowed = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@*_+-./,';
  str = str.toString();
  const len = str.length;
  let R = '';
  let k = 0;
  let S = '';
  let chr = '';
  let ord = 0;
  while (k < len) {
    chr = str[k];
    if (allowed.indexOf(chr) !== -1) {
      S = chr;
    } else {
      ord = str.charCodeAt(k);
      if (ord < 256) {
        S = '%' + ('00' + ord.toString(16)).toUpperCase().slice(-2);
      } else {
        S = '%u' + ('0000' + ord.toString(16)).toUpperCase().slice(-4);
      }
    }
    R += S;
    k++;
  }
  return R;
}

const str = 'Señor and salvación and Number%3A 1234%3B %06%88';
//Expecting: 'Señor and salvación and Number: 1234; ♠'

console.log(1, str);
console.log(2, escapeString(str))
console.log(3, decodeURIComponent(escapeString(str)));
console.log(4, unescape(decodeURIComponent(escapeString(str))));

如何正确、正确且一致地将字符串解码/转换为人类可读的版本？