<!-- parent.component.html --> <p>I'm Father, my name is: {{ name }}</p> <app-child (onChangeName)="changeName($event)" [age]=30 [name]="'Philip'"></app-child>
Then we update the name property in child component.
Run the application, you will see the error in the console.
1
core.mjs:9171 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'Tom'. Current value: 'Jerry'
Conclusion
There are several scenarios that produce this error.
value in ngAfterViewInit.
Use random values in template bindings
Update parent component property from child component.
How to solve this problem
Refactor ngAfterViewInit lifecycle hook.
Use ChangeDetectorRef to manually trigger change detection.
Posted onEdited onInangular Symbols count in article: 657Reading time ≈2 mins.
你也许在Angular的文档或者某些博客中看到过这样一句话： Every application has at least one Angular module, the root module, which must be present for bootstrapping the application on launch. By convention and by default, this NgModule is named AppModule
@Component({ standalone: true, // set standalone to true selector: 'app-root', imports: [RouterModule], // import RouterModule if you use router templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) exportclassAppComponent { title = 'angular-router'; }
Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way
注意这里discount属性是可选的，因为我们在getPrice方法中判断了discount是否存在，如果不存在就抛出异常。这样做是为了防止忘记设置折扣而导致的错误。如果不设置为可选的话会报错：Property 'discount' has no initializer and is not definitely assigned in the constructor. 由于TypeScript配置文件默认开启了strictPropertyInitialization选项导致的。
Sorting Algorithms: If you have a collection of data that can be sorted in several ways, you can use the Strategy pattern to switch between sorting algorithms (like quicksort, merge sort, heap sort) at runtime.
Payment Methods: In an e-commerce application, you can use the Strategy pattern to switch between different payment methods (like credit card, PayPal, Bitcoin) at runtime.
Compression Algorithms: If you have a file that can be compressed using different algorithms (like zip, rar, 7z), you can use the Strategy pattern to choose the compression algorithm at runtime.
Travel Planning: If you have a travel planning application, you can use the Strategy pattern to switch between different travel strategies (like by car, by train, by plane) at runtime.
leftExpr ?? rightExpr, this expression will return its right-hand side operand when the left-hand side operand is null or undefined. Otherwise, it will return its left-hand side operand.
leftExpr || rightExpr, return true if and only if one of the operands is true. Otherwise return false.
The Object.hasOwn() static method returns true if the specified object has the indicated property as its own property. If the property is inherited, or does not exist, the method returns false.
Posted onEdited onInjavascript Symbols count in article: 662Reading time ≈2 mins.
What is functional programming?
Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data.
Functional programming concepts
Pure functions
A function is called pure function if it returns the same result for the same arguments and has no side effects.
And here is the full definition of a pure function from WikiPedia
In computer programming, a pure function is a function that has the following properties
the function return values are identical for identical arguments (no variation with local static variables, non-local variables, mutable reference arguments or input streams, i.e., referential transparency), and the function has no side effects (no mutation of local static variables, non-local variables, mutable reference arguments or input/output streams).
pure function
1 2 3
functionadd(a, b) { return a + b; }
non-pure function
In the following example, the calculateTax function depends on the external variable taxRate. This means that if taxRate changes, the output of calculateTax changes even if the input remains the same. Therefore, calculateTax is not a pure function.
In functional programming, data is immutable, which means it cannot be changed once it’s created. Instead of modifying existing data, we create new data with the desired changes.
Side effects
A function is said to have a side effect if it modifies some state or variable outside its scope.
In this example, the function incrementCount has a side effect because it modifies the global variable count. This is a side effect because it’s changing state outside of its own scope.
Referential transparency
A function is called referentially transparent if it can be replaced with its value without changing the program’s behavior.
1 2 3 4
functionadd(a, b) { return a + b; } console.log(add(2, 3)); // Outputs: 5
In this example, the function add is referentially transparent because we can replace add(2, 3) with 5 without changing the program’s behavior.
First-class functions
In JavaScript, functions are first-class citizens. It means we can assign functions to variables, pass functions as arguments to other functions, and return functions from other functions.
A function that takes one or more functions as arguments or returns a function is called a higher-order function. There are many functions in javascript that are higher-order functions, such as map, filter, reduce, forEach, sort, etc.
declarative vs imperative
Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. In contrast, imperative programming is a programming paradigm that uses statements that change a program’s state.
Example: Given an array of numbers, multiply all even numbers by 10 and return the sum of them.
Imperative way:
1 2 3 4 5 6 7 8 9 10
const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { sum += numbers[i] * 10; } }
console.log(sum); // 60
Declarative way:
1 2 3 4 5 6 7 8
const numbers = [1, 2, 3, 4, 5, 6];
const sum = numbers .filter(num => num % 2 === 0) .map(num => num * 10) .reduce((acc, num) => acc + num, 0);
